import AppHeader from "@/components/AppHeader"
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 { useTheme } from "@/providers/ThemeProvider"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { RefreshControl, 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 { colors } = useTheme()
   const { token, decryptToken } = useAuthSession()
   const { id } = useLocalSearchParams<{ id: string }>()
   const [data, setData] = useState<Props>()
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)


   async function handleLoad(loading: boolean) {
      try {
         setLoading(loading)
         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(true)
   }, [])

   const handleRefresh = async () => {
      setRefreshing(true)
      handleLoad(false)
      await new Promise(resolve => setTimeout(resolve, 2000));
      setRefreshing(false)
   };

   return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: loading ? 'Loading...                            ' : data?.name,
               headerTitleAlign: 'center',
               // headerRight: () => <HeaderRightDivisionDetail id={id} />,
               header: () => (
                  <AppHeader
                     title={loading ? 'Loading...' : data?.name || ''}
                     showBack={true}
                     onPressLeft={() => router.back()}
                     right={<HeaderRightDivisionDetail id={id} />}
                  />
               )
            }}
         />
         <ScrollView
            refreshControl={
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
                  tintColor={colors.icon}
               />
            }
            showsVerticalScrollIndicator={false}
         >
            <CaraouselHome refreshing={refreshing} />
            <View style={[Styles.ph15, Styles.mb100]}>
               <FiturDivisionDetail refreshing={refreshing} />
               <TaskDivisionDetail refreshing={refreshing} />
               <FileDivisionDetail refreshing={refreshing} />
               <DiscussionDivisionDetail refreshing={refreshing} />
            </View>
         </ScrollView>
      </SafeAreaView>
   )
}