import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import userAvatar from "@/assets/images/user.png";
import { Pressable, Text, View } from "react-native";
import ImageLoader from "../ui/ImageLoader";
import { useTranslations } from "@/providers/TranslationProviders";
import { formatBalance } from "@/utils/helper";
import { router } from "expo-router";
import { SetStateAction } from "react";
import { sidebarMenu } from "@/constants/data";
import { SignOutIcon } from "phosphor-react-native";

export default function HomeSidebarScreen({
  setVisible,
  setLogoutModal,
}: {
  setVisible: React.Dispatch<SetStateAction<boolean>>;
  setLogoutModal: React.Dispatch<SetStateAction<boolean>>;
}) {
  const { user } = useAuthStore((state) => state);
  const { translateNumber } = useTranslations();
  const { primary, secondary } = useColor();
  const { currency } = useCurrency();

  return (
    <View className="">
      <View className="flex-row justify-start items-center gap-3 pb-8 border-b border-slate-200">
        <ImageLoader
          src={user?.avatar ?? userAvatar}
          alt=""
          className="size-12 rounded-xl object-cover"
        />
        <View>
          <Text className="text-lg font-manrope text-slate-500">Balance</Text>
          <Text className="text-[20px] font-bold">
            {currency.symbol}
            {translateNumber(formatBalance(user?.balance))}
          </Text>
        </View>
      </View>
      <View className="pt-8 gap-6">
        {sidebarMenu.map((menu) => (
          <View key={`${menu.id}`}>
            <Pressable
              onPress={() => {
                if (menu.link) {
                  setVisible(false);
                  router.push(menu.link as any);
                }
              }}
              className="flex-row justify-start items-center gap-2"
            >
              {/* <BuildingsIcon  /> */}
              <menu.icon color={primary.base} size={20} />
              <Text
                className="text-lg font-manrope-semibold"
                style={{
                  color: primary.base,
                }}
              >
                {menu.name}
              </Text>
            </Pressable>
            <View className="pl-4 pt-3 gap-y-3">
              {menu?.submenu?.map((item) => (
                <Text
                  key={item.id}
                  onPress={() => {
                    setVisible(false);
                    router.push(item.link as any);
                  }}
                  className="font-manrope-medium text-slate-600 border-b border-slate-200 pb-3"
                >
                  - {item.title}
                </Text>
              ))}
            </View>
          </View>
        ))}
        <Pressable
          onPress={() => {
            setVisible(false);
            setLogoutModal(true);
          }}
          className="flex-row justify-start items-center gap-2"
        >
          {/* <BuildingsIcon  /> */}
          <SignOutIcon color={primary.base} size={20} />
          <Text
            className="text-lg font-manrope-semibold"
            style={{
              color: secondary.base,
            }}
          >
            Logout
          </Text>
        </Pressable>
      </View>
    </View>
  );
}
