import Styles from "@/constants/Styles"
import { apiGetDocument } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign, Ionicons } from "@expo/vector-icons"
import { useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { Pressable, View } from "react-native"
import BorderBottomItem from "../borderBottomItem"
import DrawerBottom from "../drawerBottom"
import Text from "../Text"

type Props = {
   open: boolean
   close: (value: boolean) => void
   category: 'copy' | 'move'
   onConfirm: (value: string) => void
   dataChoose: any[]
}

type DataProps = {
   id: string;
   category: string;
   name: string;
   extension: string;
   idStorage: string;
   path: string;
   createdBy: string;
   share: boolean;
   createdAt: string;
   updatedAt: string;
}

type PropsPath = {
   id: string;
   name: string;
};

export default function ModalSalinMove({ open, close, category, onConfirm, dataChoose }: Props) {
   const [data, setData] = useState<DataProps[]>([])
   const { token, decryptToken } = useAuthSession()
   const [path, setPath] = useState('home')
   const { id } = useLocalSearchParams<{ id: string }>();
   const [dataJalur, setDataJalur] = useState<PropsPath[]>([])

   async function getData() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDocument({ user: hasil, path, division: id, category: 'folder' })
         if (response.success) {
            setData(response.data)
            setDataJalur(response.jalur)
         }
      } catch (error) {
         console.error(error)
      }
   }

   useEffect(() => {
      getData()
   }, [path])

   return (
      <DrawerBottom animation="slide" isVisible={open} setVisible={close} title={category == 'copy' ? 'Pilih Lokasi Salin' : 'Pilih Lokasi Pemindahan'} height={75}>
         <View style={[Styles.rowItemsCenter, Styles.mv05]}>
            {
               dataJalur.map((item, index) => (
                  <Pressable
                     key={index}
                     style={[Styles.rowItemsCenter]}
                     onPress={() => {
                        setPath(item.id);
                     }}
                  >
                     {item.id != "home" && (
                        <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
                     )}
                     <Text> {item.name} </Text>
                  </Pressable>
               ))
            }
         </View>
         <View>
            {
               data.length > 0 ?
                  data.map((item, index) => {
                     const found = dataChoose.some((i: any) => i.id == item.id);
                     return (
                        <BorderBottomItem
                           key={index}
                           borderType="bottom"
                           icon={<Ionicons name="folder-open-sharp" style={[found ? Styles.cGray : Styles.cFolder]} size={30} />}
                           title={item.name}
                           titleWeight="normal"
                           onPress={() => {
                              if (found) return;
                              setPath(item.id);
                           }}
                           subtitle={found ? <Text style={[Styles.textInformation, Styles.cGray]}>Tidak dapat memilih folder ini</Text> : ''}
                        />
                     )
                  }
                  )

                  :
                  <Text style={[Styles.textDefault, Styles.cGray, Styles.mt15, { textAlign: 'center' }]}>Tidak ada data</Text>
            }
         </View>
         <View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0]}>
            <Pressable style={[Styles.pv05, Styles.borderRight, { width: '50%' }]} onPress={() => close(false)}>
               <Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>BATAL</Text>
            </Pressable>
            <Pressable style={[Styles.pv05, { width: '50%' }]} onPress={() => onConfirm(path)}>
               <Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>{category == 'copy' ? 'SALIN' : 'PINDAH'}</Text>
            </Pressable>
         </View>
      </DrawerBottom>
   )
}