//import { Link } from "expo-router";
import {
  FlatList,
  Image,
  SafeAreaView,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import images from "@/constants/images";
import icons from "@/constants/icons";
import Search from "@/components/Search";
import { useGlobalContext } from "@/lib/globalProvider";
import { Card, FeaturedCard } from "@/components/Cards";
import Filters from "@/components/Filters";

export default function Index() {
  // create func that determines the time od day [morning, evening, night]
  const { user, refetch } = useGlobalContext();
  return (
    <SafeAreaView className={"bg-white h-full"}>
      <FlatList
        data={[5, 6, 7, 8]}
        renderItem={({ item }) => <Card />}
        keyExtractor={(item) => item.toString()}
        numColumns={2}
        contentContainerClassName={"pb-32"}
        columnWrapperClassName={"flex flex-row gap-5 px-5"}
        showsVerticalScrollIndicator={false}
        ListHeaderComponent={
          <View className={"px-4"}>
            <View className={"flex flex-row items-center justify-between mt-5"}>
              <View className={"flex flex-row items-center"}>
                <Image
                  source={{ uri: user?.avatar }}
                  className={"rounded-full size-12"}
                />
                <View
                  className={"flex flex-col items-start ml-4 justify-center"}
                >
                  <Text className={"capitalize"}>good morning</Text>
                  <Text className={"capitalize font-bold"}>{user?.name}</Text>
                </View>
              </View>
              <Image source={icons.bell} className={"size-6"} />
            </View>

            <Search />
            <View className={"my-5"}>
              <View className={"flex flex-row items-center justify-between"}>
                <Text className={"capitalize font-bold text-base"}>
                  featured
                </Text>
                <TouchableOpacity>
                  <Text className={"capitalize text-base text-blue-500"}>
                    see all
                  </Text>
                </TouchableOpacity>
              </View>
              <FlatList
                data={[1, 2, 3]}
                renderItem={({ item }) => <FeaturedCard />}
                keyExtractor={(item) => item.toString()}
                horizontal={true}
                bounces={false}
                showsHorizontalScrollIndicator={false}
                contentContainerClassName={"flex gap-3 mt-5"}
              />
              {/*<View className={'flex flex-row gap-5 mt-5'}>*/}
              {/*    <FeaturedCard/>*/}
              {/*    <FeaturedCard/>*/}
              {/*</View>*/}
            </View>

            <View className={"flex flex-row items-center justify-between"}>
              <Text className={"capitalize font-bold text-base"}>
                latest cars
              </Text>
              <TouchableOpacity>
                <Text className={"capitalize font-bold"}>see all</Text>
              </TouchableOpacity>
            </View>
            <Filters />
            <View className={"flex flex-row gap-5 mt-5"}>
              <Card />
              <Card />
            </View>
          </View>
        }
      />
    </SafeAreaView>
  );
}