import Styles from "@/constants/Styles"
import { apiGetGroup } from "@/lib/api"
import { setEntityFilterGroup } from "@/lib/filterSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router"
import { useEffect, useState } from "react"
import { Pressable, ScrollView, View } from "react-native"
import Text from './Text';
import { useDispatch, useSelector } from "react-redux"
import { ButtonForm } from "./buttonForm"
import DrawerBottom from "./drawerBottom"


type Props = {
   open: boolean,
   close: (value: boolean) => void
   page: 'position' | 'member' | 'discussion' | 'project' | 'division'
   category?: 'filter-group' | 'filter-data'
}

export default function ModalFilter({ open, close, page, category }: Props) {
   const data = [
      {
         id: "data-saya",
         name: "Kegiatan Saya",
      },
      {
         id: "semua",
         name: "Semua Kegiatan",
      },
   ]
   const { token, decryptToken } = useAuthSession()
   const dispatch = useDispatch()
   const entities = useSelector((state: any) => state.filterGroup)
   const [chooseGroup, setChooseGroup] = useState('')

   async function handleLoad() {
      const hasil = await decryptToken(String(token?.current))
      const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
      dispatch(setEntityFilterGroup(response.data))
   }

   useEffect(() => {
      if (entities.length == 0) {
         handleLoad()
      }
   }, [dispatch]);




   return (
      <DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
         <View style={{ justifyContent: 'space-between', flex: 1 }}>
            <ScrollView>
               <View>
                  {
                     category == "filter-data"
                        ?
                        data.map((item: any, index: any) => (
                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
                              <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
                              {
                                 chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'}/>
                              }
                           </Pressable>
                        ))
                        :
                        entities.map((item: any, index: any) => (
                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
                              <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
                              {
                                 chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'}/>
                              }
                           </Pressable>
                        ))
                  }
               </View>
            </ScrollView>
            <View>
               <ButtonForm text="Terapkan" onPress={() => {
                  close(false)
                  page == 'project' ?
                     category == "filter-data"
                        ?
                        router.replace(`/${page}?status=0&cat=${chooseGroup}`)
                        :
                        router.replace(`/${page}?status=0&group=${chooseGroup}`)
                     :
                     router.replace(`/${page}?active=true&group=${chooseGroup}`)
               }} />
            </View>
         </View>
      </DrawerBottom>
   )
}