import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonHeader } from "@/components/buttonHeader"
import HeaderRightDocument from "@/components/document/headerDocument"
import ItemFile from "@/components/document/itemFile"
import MenuBottomSelectDocument from "@/components/document/menuBottomSelectDocument"
import Styles from "@/constants/Styles"
import { AntDesign, MaterialIcons } from "@expo/vector-icons"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, View } from "react-native"

export default function DocumentDivision() {
   const { path } = useLocalSearchParams<{ path?: string }>()
   const [isChecked, setIsChecked] = useState(false)

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () =>
                  isChecked
                     ? <ButtonHeader item={<MaterialIcons name="close" size={20} color="white" />} onPress={() => { setIsChecked(false) }} />
                     : <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: isChecked ? '1 item terpilih' : 'Dokumen Divisi',
               headerTitleAlign: 'center',
               headerRight: () =>
                  isChecked
                     ? <ButtonHeader item={<MaterialIcons name="checklist-rtl" size={20} color="white" />} onPress={() => { }} />
                     : <HeaderRightDocument id={path} />
            }}
         />
         <ScrollView style={{ height: '100%' }}>
            <View style={[Styles.p15, Styles.mb100]}>
               <View style={[Styles.rowItemsCenter]}>
                  <Text> home </Text>
                  <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
                  <Text> folder 1 </Text>
               </View>
               <View>
                  <ItemFile category="folder" title="Folder Pertama" dateTime="05-02-2025 07:54" onChecked={() => { setIsChecked(!isChecked) }} checked={isChecked} />
                  <ItemFile category="file" title="Images.jpg" dateTime="05-11-2024 07:54" />
                  <ItemFile category="folder-shared" title="Folder shared" dateTime="05-11-2024 07:54" />
                  <ItemFile category="file-shared" title="images-shared.pdf" dateTime="05-11-2024 07:54" />
               </View>
            </View>
         </ScrollView>
         {
            isChecked && <MenuBottomSelectDocument onDone={() => { setIsChecked(false) }} />
         }
      </SafeAreaView>
   )
}