mobile-darmasaba/components/modalSelectMultiple.tsx

import Styles from "@/constants/Styles"
import { apiGetDivisionGroup } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign } from "@expo/vector-icons"
import { useEffect, useState } from "react"
import { Pressable, ScrollView, Text, ToastAndroid, View } from "react-native"
import { ButtonForm } from "./buttonForm"
import DrawerBottom from "./drawerBottom"

type Props = {
   open: boolean
   close: (value: boolean) => void
   title: string
   category: 'share-division' | 'choose-division'
   choose: string
   onSelect: (value: any[]) => void
   value?: any
}

type CheckedState = {
   [key: string]: string[];
}

type GroupData = {
   id: string;
   name: string;
   Division: {
      id: string;
      name: string;
   }[];
}

export default function ModalSelectMultiple({ open, close, title, category, choose, onSelect, value }: Props) {
   const [isChoose, setChoose] = useState(choose)
   const { token, decryptToken } = useAuthSession()
   const [data, setData] = useState<any>([])
   const [checked, setChecked] = useState<CheckedState>({});

   async function handleLoadChooseDivision() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const response = await apiGetDivisionGroup({ user: hasil })
         setData(response.data)

         if (value.length > 0) {
            const formatArray = value.reduce((result: any, obj: any) => {
               result[obj.id] = obj.Division.map((item: any) => item.id);
               return result;
            }, {})
            setChecked(formatArray)
         }
      } catch (error) {
         console.error(error)
      }
   }

   useEffect(() => {
      if (category == 'choose-division') {
         handleLoadChooseDivision()
      } else if (category == 'share-division') {
         // handleLoadPosition()
      }
   }, [open]);

   const handleCheck = (groupId: string, divisionId: string) => {
      const newChecked = { ...checked };
      if (newChecked[groupId]) {
         if (newChecked[groupId].includes(divisionId)) {
            newChecked[groupId] = newChecked[groupId].filter(item => item !== divisionId);
            if (newChecked[groupId].length === 0) {
               delete newChecked[groupId];
            }
         } else {
            newChecked[groupId].push(divisionId);
         }
      } else {
         newChecked[groupId] = [divisionId];
      }
      setChecked(newChecked);
   };


   const handleGroupCheck = (groupId: string) => {
      const newChecked = { ...checked };
      if (newChecked[groupId]) {
         delete newChecked[groupId];
      } else {
         if (data.find((item: { id: string }) => item.id === groupId)?.Division.length == 0) {
            return ToastAndroid.show('Tidak ada divisi', ToastAndroid.SHORT)
         }
         newChecked[groupId] = data.find((item: { id: string }) => item.id === groupId)?.Division.map((item: { id: any }) => item.id) || [];
      }
      setChecked(newChecked);
   };

   const handleSubmit = () => {
      const selectedGroups: GroupData[] = [];
      Object.keys(checked).forEach((groupId) => {
         const group = data.find((item: { id: string }) => item.id === groupId);
         if (group) {
            selectedGroups.push({
               id: group.id,
               name: group.name,
               Division: group.Division.filter((division: { id: string }) => checked[groupId].includes(division.id)),
            });
         }
      });
      onSelect(selectedGroups);
   };

   return (
      <DrawerBottom animation="slide" isVisible={open} setVisible={close} title={title} height={75}>
         <ScrollView style={[Styles.mb50]}>
            {
               category == 'share-division' ?
                  <>
                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
                        setChoose('dinas')
                        close(false)
                     }}>
                        <Text style={[Styles.textDefaultSemiBold]}>Sosial Kemasyarakatan</Text>
                        <AntDesign name="check" size={20} />
                     </Pressable>
                     {/* <Pressable style={[Styles.itemSelectModal]}>
                        <Text>Kaur Pemerintahan</Text>
                     </Pressable>
                     <Pressable style={[Styles.itemSelectModal]}>
                        <Text>Kasi Kemasyarakatan</Text>
                     </Pressable>
                     <Pressable style={[Styles.itemSelectModal]}>
                        <Text>PKK</Text>
                     </Pressable> */}
                  </>
                  :
                  data.map((item: any, index: number) => {
                     return (
                        <>
                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { handleGroupCheck(item.id) }}>
                              <Text style={[Styles.textMediumSemiBold]}>{item.name}</Text>
                              {
                                 checked[item.id] && checked[item.id].length === item.Division.length
                                    ? <AntDesign name="check" size={20} />
                                    : (checked[item.id] && checked[item.id].length > 0 && checked[item.id].length < item.Division.length)
                                       ? <AntDesign name="minus" size={20} />
                                       : <></>
                              }
                           </Pressable>
                           {
                              item.Division.map((child: any, v: number) => {
                                 return (
                                    <Pressable key={v} style={[Styles.itemSelectModal]} onPress={() => { handleCheck(item.id, child.id) }}>
                                       <Text style={[Styles.ml10, Styles.textMediumNormal]}>{child.name}</Text>
                                       {
                                          checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} />
                                       }
                                    </Pressable>
                                 )
                              })
                           }
                        </>
                     )
                  })
            }
         </ScrollView>
         <View style={[Styles.absolute0, { width: '100%' }]}>
            <ButtonForm text="PILIH" onPress={() => { handleSubmit() }} />
         </View>
      </DrawerBottom>
   )
}