import ButtonBackHeader from "@/components/buttonBackHeader"
import DiscussionDivisionDetail from "@/components/division/discussionDivisionDetail"
import FileDivisionDetail from "@/components/division/fileDivisionDetail"
import FiturDivisionDetail from "@/components/division/fiturDivisionDetail"
import HeaderRightDivisionDetail from "@/components/division/headerDivisionDetail"
import TaskDivisionDetail from "@/components/division/taskDivisionDetail"
import CaraouselHome from "@/components/home/carouselHome"
import Styles from "@/constants/Styles"
import { apiGetDivisionOneDetail } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { SafeAreaView, ScrollView, View } from "react-native"

type Props = {
   id: string,
   idVillage: string,
   idGroup: string,
   name: string,
   desc: string,
   isActive: boolean,
}

export default function DetailDivisionFitur() {
   const { token, decryptToken } = useAuthSession()
   const { id } = useLocalSearchParams<{ id: string }>()
   const [data, setData] = useState<Props>()
   const [loading, setLoading] = useState(true)


   async function handleLoad() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDivisionOneDetail({ user: hasil, id })
         setData(response.data.division)
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => {
      handleLoad()
   }, [])

   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: loading ? 'Loading...                            ' : data?.name,
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightDivisionDetail id={id} />,
            }}
         />
         <ScrollView>
            <CaraouselHome />
            <View style={[Styles.ph15, Styles.mb100]}>
               <FiturDivisionDetail />
               <TaskDivisionDetail />
               <FileDivisionDetail />
               <DiscussionDivisionDetail />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}