import { Image, ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { InputField } from "@/components/input-field";
import { icons } from "@/constants";
import { useSession } from "@/lib/session";

const Profile = () => {
  const { user } = useSession();

  return (
    <SafeAreaView className="flex-1">
      <ScrollView
        className="px-5"
        contentContainerStyle={{ paddingBottom: 120 }}
      >
        <Text className="text-2xl font-JakartaBold my-5">My Profile</Text>

        <View className="flex items-center justify-center my-5">
          <Image
            source={user?.avatarUrl ? { uri: user.avatarUrl } : icons.profile}
            alt="Your Avatar"
            style={{ width: 110, height: 110, borderRadius: 110 / 2 }}
            className=" rounded-full h-[110px] w-[110px] border-[3px] border-white shadow-sm shadow-neutral-300"
          />
        </View>

        <View className="flex flex-col items-start justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 px-5 py-3">
          <View className="flex flex-col items-start justify-start w-full">
            <InputField
              label="First name"
              placeholder={user?.name?.split(" ")[0] || "Your First name"}
              containerStyles="w-full mb-4"
              inputStyles="p-3.5"
              editable={false}
            />

            <InputField
              label="Last name"
              placeholder={user?.name?.split(" ").slice(1).join(" ") || "Your Last name"}
              containerStyles="w-full mb-4"
              inputStyles="p-3.5"
              editable={false}
            />

            <InputField
              label="Email"
              placeholder={user?.email ?? "Your Email address"}
              containerStyles="w-full mb-4"
              inputStyles="p-3.5"
              editable={false}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Profile;