import { Box, Modal, SimpleGrid, Skeleton, Text } from "@mantine/core";
import { TimeInput } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetDetailProject } from "../lib/api_project";

export function ModalListDetailTaskProject({ open, onClose, task, }: { open: boolean, onClose: () => void, task: string }) {
   const [dataDetail, setDataDetail] = useState([])
   const [loading, setLoading] = useState(false)

   async function getData() {
      try {
         setLoading(true)
         const response = await funGetDetailProject(task, 'detailTask')
         if (response.success) {
            setDataDetail(response.data)
         } else {
            toast.error(response.message)
         }
      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
      } finally {
         setLoading(false)
      }
   }

   useShallowEffect(() => {
      if(task!=""){
         getData()
      }
   }, [task])

   return (
      <Modal styles={{
         body: {
            borderRadius: 20
         },
         content: {
            borderRadius: 20,
            border: `2px solid ${"#828AFC"}`
         }
      }} opened={open} onClose={() => onClose()} centered withCloseButton={false} title={"Detail Tanggal dan Waktu Tugas"}>
         <Box p={10}>
            <Box>
               {
                  loading ?
                     Array(5)
                        .fill(null)
                        .map((_, i) => (
                           <Box key={i}>
                              <Box>
                                 <Skeleton width={"100%"} mb={15} height={30} radius={"md"} />
                              </Box>
                           </Box>
                        ))
                     :
                     dataDetail.length > 0 ?
                        dataDetail.map((data: any, index: any) => (
                           <Box key={index} py={10} style={{ borderBottom: `1px solid ${"#D6D8F6"}` }}>
                              <Text fw={"bold"}>{moment(data.date).format('DD-MM-YYYY')}</Text>
                              <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }}>
                                 <TimeInput
                                    styles={{
                                       input: {
                                          border: `1px solid ${"#D6D8F6"}`,
                                          borderRadius: 10,
                                       },
                                    }}
                                    size="md"
                                    label="Waktu Awal"
                                    value={data.timeStart}
                                    readOnly
                                 />
                                 <TimeInput
                                    styles={{
                                       input: {
                                          border: `1px solid ${"#D6D8F6"}`,
                                          borderRadius: 10,
                                       },
                                    }}
                                    size="md"
                                    label="Waktu Akhir"
                                    value={data.timeEnd}
                                    readOnly
                                 />
                              </SimpleGrid>
                           </Box>
                        ))
                        :
                        <Text ta="center" c={"gray"}>Tidak ada detail tugas</Text>
               }
            </Box>
         </Box>
      </Modal>
   )
}