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>
  );
}