import { TEMA } from "@/module/_global";
import { Box, Button, Grid, Modal, SimpleGrid, Text } from "@mantine/core";
import { TimeInput } from "@mantine/dates";
import moment from "moment";
import { useEffect, useState } from "react";

export function ModalAddDetailTaskProject({ open, onClose, data, onSubmit }: { open: boolean, onClose: () => void, data: any[], onSubmit: (data: any) => void }) {
   const [dataDetail, setDataDetail] = useState(data)
   const [touched, setTouched] = useState<any>([])

   useEffect(() => {
      setDataDetail(data)
   }, [data])

   function onInputTime(date: any, value: any, cat: 'timeStart' | 'timeEnd') {
      if (cat == "timeEnd") {
         if (value == "" || dataDetail.find((data: any) => data.date == date)?.timeStart > value) {
            setTouched((touched: any) => [...touched, { date: date, timeEnd: true }])
         } else {
            setTouched((touched: any) => touched.filter((item: any) => item.date != date))
         }
      } else {
         if (value == "" || dataDetail.find((data: any) => data.date == date)?.timeEnd < value) {
            setTouched((touched: any) => [...touched, { date: date, timeEnd: true }])
         } else {
            setTouched((touched: any) => touched.filter((item: any) => item.date != date))
         }
      }

      setDataDetail(dataDetail.map((data: any) => {
         if (data.date == date) {
            return {
               ...data,
               [cat]: value
            }
         }
         return data
      }))
   }

   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>
               {
                  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}
                              onChange={(event) => onInputTime(data.date, event.target.value, 'timeStart')}
                           />
                           <TimeInput
                              styles={{
                                 input: {
                                    border: `1px solid ${"#D6D8F6"}`,
                                    borderRadius: 10,
                                 },
                              }}
                              size="md"
                              label="Waktu Akhir"
                              value={data.timeEnd}
                              onChange={(event) => onInputTime(data.date, event.target.value, 'timeEnd')}
                              error={touched.find((item: any) => item.date == data.date)?.timeEnd ? "Waktu akhir harus lebih dari waktu awal" : ""}
                           />
                        </SimpleGrid>
                     </Box>
                  ))
               }
            </Box>
            <Grid mt={10}>
               <Grid.Col span={6}>
                  <Button variant="light" fullWidth color='#969494' onClick={() => onClose()}>Batalkan</Button>
               </Grid.Col>
               <Grid.Col span={6}>
                  <Button variant="light" disabled={touched.length > 0} fullWidth color={TEMA.get().utama} onClick={() => { onSubmit(dataDetail) }}>Simpan</Button>
               </Grid.Col>
            </Grid>

         </Box>
      </Modal>
   )
}