import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity, ImageSourcePropType, Alert} from "react-native";
import React from "react";
import icons from "@/constants/icons"
import images from "@/constants/images";
import {settings} from "@/constants/data";
import {useGlobalContext} from "@/lib/globalProvider";
import {logOut} from "@/lib/appwrite";
import {parseJson} from "ajv/dist/runtime/parseJson";

interface  SettingsItemsProps{
    icon: ImageSourcePropType,
    title: string,
    onPress?: () => void,
    textStyle?: string,
    showArrow?: boolean,
}
const SettingsItems = ({icon, title, onPress, textStyle, showArrow = true } : SettingsItemsProps) => (
    <TouchableOpacity onPress={onPress} className={'flex flex-row justify-between py-3'}>
        <View className={'flex flex-row items-center gap-3'}>
            <Image source={icon} className={'size-6'}/>
            <Text>{title}</Text>
        </View>
        {showArrow && <Image source={icons.rightArrow} className={'size-5'}/>}
    </TouchableOpacity>
)

const Profile = () => {
    const {user, refetch} = useGlobalContext();
    const handleLogout = async () => {
        const result = await logOut();
        if(result) {
            Alert.alert('logged out')
            refetch();
        }
    };
  return (
    <SafeAreaView className={'h-full bg-white'}>
        <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerClassName={'pb-32 px-7'}>
            <View className={'flex flex-row items-center justify-between mt-5'}>
                <Text className={'text-2xl text-bold'}>Profile</Text>
                <Image source={icons.bell} className={'size-5'}/>
            </View>
            <View className={'flex flex-row justify-center mt-5'}>
                <View className={'flex flex-col items-center relative mt-5'}>
                    <Image source={{uri: user?.avatar}}className={'size-44 relative rounded-full'}/>
                    <TouchableOpacity className={'absolute bottom-11 right-2'}>
                        <Image source={icons.edit} className={'size-9'}/>
                    </TouchableOpacity>
                    <Text>{ user?.name}</Text>
                </View>
            </View>

            <View className={'flex flex-col mt-10'}>
                <SettingsItems icon = {icons.calendar} title={'MyCars - Возила'}/>
                <SettingsItems icon = {icons.wallet} title={'Payments- Плаќања'}/>
            </View>

            <View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
                {settings.slice(2).map((item, index ) => (
                    <SettingsItems key={index} {...item}/>
                ) )}
            </View>

            <View className={'flex flex-col mt-5 border-t pt-5 border-blue-200'}>
                <SettingsItems icon={icons.logout} title={'Logout - Одјависе'} onPress={handleLogout} showArrow={false}/>
            </View>
        </ScrollView>
    </SafeAreaView>
  );
};

export default Profile;