mobile-darmasaba/components/project/modalListDetailTugasProject.tsx

import Styles from "@/constants/Styles";
import { apiGetProjectTask } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useEffect, useState } from "react";
import { Dimensions, View, VirtualizedList } from "react-native";
import { InputDate } from "../inputDate";
import ModalFloat from "../modalFloat";
import Skeleton from "../skeleton";
import Text from "../Text";

interface Props {
   id: string;
   date: string;
   timeStart: string;
   timeEnd: string;
}

export default function ModalListDetailTugasProject({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
   const [data, setData] = useState<Props[]>([])
   const [loading, setLoading] = useState(false)
   const { token, decryptToken } = useAuthSession()
   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
   const tinggiScreen = Dimensions.get("window").height;
   const tinggiFix = tinggiScreen * 70 / 100;



   async function getData() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current));
         const res = await apiGetProjectTask({ user: hasil, id: idTask, cat: "detailTask" })
         setData(res.data)
      } catch (error) {
         console.error(error)
      } finally {
         setLoading(false)
      }
   }

   useEffect(() => {
      if (isVisible) {
         getData()
      }
   }, [isVisible, idTask])

   const getItem = (_data: unknown, index: number): Props => ({
      id: data[index].id,
      date: data[index].date,
      timeStart: data[index].timeStart,
      timeEnd: data[index].timeEnd,
   })

   return (
      <ModalFloat
         title="Detail Tanggal dan Waktu Tugas"
         isVisible={isVisible}
         setVisible={setVisible}
         buttonHide
      >
         <View style={[{ height: tinggiFix }]} >
            {
               loading ?
                  arrSkeleton.map((item: any, i: number) => {
                     return (
                        <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
                     )
                  })
                  :
                  data.length > 0 ?
                     (
                        <VirtualizedList
                           data={data}
                           getItemCount={() => data.length}
                           getItem={getItem}
                           renderItem={({ item, index }: { item: Props, index: number }) => {
                              return (
                                 <View key={index} style={[Styles.borderBottom, Styles.pv05]}>
                                    <Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
                                    <View style={[Styles.rowSpaceBetween]}>
                                       <View style={[{ width: "48%" }]}>
                                          <InputDate
                                             mode="time"
                                             disable
                                             onChange={(val) => { }}
                                             value={item.timeStart}
                                             label="Waktu Awal"
                                             placeholder="--:--"
                                          />
                                       </View>
                                       <View style={[{ width: "48%" }]}>
                                          <InputDate
                                             onChange={(val) => { }}
                                             mode="time"
                                             value={item.timeEnd}
                                             label="Waktu Akhir"
                                             placeholder="--:--"
                                             disable
                                          />
                                       </View>
                                    </View>
                                 </View>
                              )
                           }}
                           keyExtractor={(item, index) => String(index)}
                           showsVerticalScrollIndicator={false}
                        />
                     )
                     :
                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]} >Tidak ada data</Text>
            }
         </View>

      </ModalFloat>
   )
}