import { IMenuDrawerItem } from "@/components/_Interface/types";
import BackButton from "@/components/_ShareComponent/BackButton";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import AlertCustom from "@/components/Alert/AlertCustom";
import DrawerCustom from "@/components/Drawer/DrawerCustom";
import { MainColor } from "@/constants/color-palet";
import { DRAWER_HEIGHT } from "@/constants/constans-value";
import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
import { Styles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useRef, useState } from "react";
import { Animated, Text, TouchableHighlight, TouchableOpacity, View } from "react-native";

export default function Profile() {
  const { id } = useLocalSearchParams();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [showLogoutAlert, setShowLogoutAlert] = useState(false);

  const drawerItems: IMenuDrawerItem[] = [
    {
      icon: "create",
      label: "Edit profile",
      path: `/(application)/profile/${id}/edit`,
    },
    {
      icon: "camera",
      label: "Ubah foto profile",
      path: `/(application)/profile/${id}/update-photo`,
    },
    {
      icon: "image",
      label: "Ubah latar belakang",
      path: `/(application)/profile/${id}/update-background`,
    },
    {
      icon: "add-circle",
      label: "Tambah portofolio",
      path: `/(application)/portofolio/${id}/create`,
    },
    // {
    //   icon: "settings",
    //   label: "Dashboard Admin",
    //   path: `/(application)/profile/dashboard-admin`,
    // },
    { icon: "log-out", label: "Keluar", color: "red", path: "" },
  ];

  // Animasi menggunakan translateY (lebih kompatibel)
  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar

  const openDrawer = () => {
    setIsDrawerOpen(true);
    Animated.timing(drawerAnim, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  const closeDrawer = () => {
    Animated.timing(drawerAnim, {
      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
      duration: 300,
      useNativeDriver: true,
    }).start(() => {
      setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
    });
  };

  const handleLogout = () => {
    console.log("User logout");
    router.replace("/");
    setShowLogoutAlert(false);
  };

  return (
    <>
      <ViewWrapper>
        {/* Header */}
        <Stack.Screen
          options={{
            title: "Profile",
            headerLeft: () => <BackButton />,
            headerRight: () => (
              <TouchableOpacity onPress={openDrawer}>
                <Ionicons
                  name="ellipsis-vertical"
                  size={20}
                  color={MainColor.yellow}
                />
              </TouchableOpacity>
            ),
            headerStyle: Styles.headerStyle,
            headerTitleStyle: Styles.headerTitleStyle,
          }}
        />
        <Text style={Styles.textLabel}>Profile {id}</Text>
        <TouchableHighlight
          onPress={() => router.push(`/(application)/portofolio/${id}`)}
        >
          <View
            style={{
              backgroundColor: MainColor.white,
              padding: 10,
              borderRadius: 10,
              marginTop: 10,
            }}
          >
            <Text>Portofolio</Text>
          </View>
        </TouchableHighlight>
      </ViewWrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
        height={350}
        isVisible={isDrawerOpen}
        drawerAnim={drawerAnim}
        closeDrawer={closeDrawer}
      >
        <Profile_MenuDrawerSection
          drawerItems={drawerItems}
          setShowLogoutAlert={setShowLogoutAlert}
        />
      </DrawerCustom>

      {/* Alert Komponen Eksternal */}
      <AlertCustom
        isVisible={showLogoutAlert}
        onLeftPress={() => setShowLogoutAlert(false)}
        onRightPress={handleLogout}
        title="Apakah anda yakin ingin keluar?"
        textLeft="Batal"
        textRight="Keluar"
        colorRight={MainColor.red}
      />
    </>
  );
}