import React from "react";
import { View, Text, Pressable, Image } from "react-native";
import { Link } from "expo-router";
import { BellIcon, LucidePersonStanding } from "lucide-react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ROUTES } from "~/lib/routes";
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
import { Icons } from "~/assets/icons";
import { useTranslation } from "react-i18next";

function TopBar() {
  const { t } = useTranslation();
  const { profile, profileLoading } = useAuthWithProfile();
  const insets = useSafeAreaInsets();
  const fullName = profile?.fullName;
  const firstName = fullName?.split(" ")[0];
  const avatarSource = profile?.photoUrl
    ? { uri: profile.photoUrl }
    : Icons.avatar;

  return (
    <View className="flex flex-row items-center justify-between px-5 pt-4 pb-4 w-full">
      <View className="flex flex-row items-center">
        <Text className="font-dmsans text-xl font-bold">
          {t("components.topbar.greeting")}
        </Text>
        <Text className="font-dmsans text-xl ml-1 font-bold text-primary">
          {profileLoading
            ? "..."
            : firstName && firstName.length > 8
            ? firstName.substring(0, 8)
            : firstName}
        </Text>
      </View>
      <View className="flex flex-row items-center gap-2">
        <Link href={ROUTES.NOTIFICATION} asChild>
          <Pressable className="border border-dashed border-secondary rounded-full p-2">
            <BellIcon color="#FFB668" size={24} />
          </Pressable>
        </Link>
        <Link href={ROUTES.PROFILE} asChild>
          <Pressable className="rounded-full overflow-hidden  ml-3">
            <Image
              source={avatarSource}
              style={[
                { width: 38, height: 38, borderRadius: 19 },
                !profile?.photoUrl ? { tintColor: "#FFB668" } : null,
              ]}
              resizeMode="cover"
            />
          </Pressable>
        </Link>
      </View>
    </View>
  );
}

export default TopBar;