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 { useEffect, useState } from "react"
import { Pressable, ScrollView, Text, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"
import DrawerBottom from "./drawerBottom"

type Props = {
   open: boolean
   close: (value: boolean) => void
   title: string
   category: 'group' | 'status-task'

   onSelect: (value: { val: string, label: string }) => void
}

export default function ModalSelect({ open, close, title, category, onSelect }: Props) {
   // const [isChoose, setChoose] = useState(choose)
   const { token, decryptToken } = useAuthSession()
   const dispatch = useDispatch()
   const entitiesGroup = useSelector((state: any) => state.filterGroup)
   const [chooseValue, setChooseValue] = useState({ val: '', label: '' })

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

   useEffect(() => {
      if (entitiesGroup.length == 0 && category == 'group') {
         handleLoadGroup()
      }
   }, [dispatch]);

   function onChoose(val: string, label: string) {
      setChooseValue({ val, label })
      onSelect({ val, label })
      close(false)
   }

   return (
      <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
         <ScrollView>
            <View>
               {
                  category == 'group' ?
                     entitiesGroup.map((item: any, index: any) => (
                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
                           <Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
                           {
                              chooseValue.val == item.id && <AntDesign name="check" size={20} />
                           }
                        </Pressable>
                     ))
                     :
                     <>
                        <Pressable style={[Styles.itemSelectModal]} onPress={() => {
                           onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
                           close(false)
                        }}>
                           <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
                           <AntDesign name="check" size={20} />
                        </Pressable>
                        <Pressable style={[Styles.itemSelectModal]}>
                           <Text>Selesai</Text>
                        </Pressable>
                     </>
               }

            </View>
         </ScrollView>
      </DrawerBottom>
   )
}