'use client'
import { TEMA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { CiClock2 } from "react-icons/ci";
import { funGetDetailDivisionById } from "../lib/api_division";
import { useState } from "react";
import { IDataTaskOnDetailDivision } from "../lib/type_division";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";


export default function ListTaskOnDetailDivision() {
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const [data, setData] = useState<IDataTaskOnDetailDivision[]>([])
   const [loading, setLoading] = useState(true);
   const tema = useHookstate(TEMA)

   async function fetchData() {
      try {
         setLoading(true);
         const res = await funGetDetailDivisionById(param.id, 'today-task');
         if (res.success) {
            setData(res.data)
         } else {
            toast.error(res.message);
         }
         setLoading(false);
      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan divisi, coba lagi nanti");
      } finally {
         setLoading(false);
      }
   }

   useShallowEffect(() => {
      fetchData()
   }, [param.id])

   const isMobile = useMediaQuery('(max-width: 369px)');

   return (
      <Box pt={10}>
         <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
         <Group justify="center" grow>
            {
               loading ?
                  Array(2)
                     .fill(null)
                     .map((_, i) => (
                        <Stack align="stretch" justify="center" key={i}>
                           <Skeleton height={80} radius="md" m={0} w={isMobile ? "80%" : "90%"} />
                           <Skeleton height={10} radius="md" m={0} w={isMobile ? "80%" : "90%"}/>
                        </Stack>
                     ))
                  :
                  (data.length === 0) ?
                     <Stack align="stretch" justify="center" w={"100%"}>
                        <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada tugas hari ini</Text>
                     </Stack>
                     : <></>
            }
         </Group>
         <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
            {data.map((v, i) =>
               <Carousel.Slide key={v.id}>
                  <Box p={20} w={{
                     base: isMobile ? 230 : 300,
                     md: 400
                  }} onClick={() => router.push(`/task/${v.id}`)} bg={tema.get().utama} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
                     <Text fw={'bold'} c={tema.get().bgUtama} lineClamp={1}>{_.startCase(v.title)}</Text>
                     <Group justify="space-between" mt={20}>
                        <Group gap={5} align="center" c={"#CFCDCD"}>
                           <CiClock2 size={18} />
                           <Text fz={13}>{v.dateStart}</Text>
                        </Group >
                     </Group>
                  </Box>
               </Carousel.Slide>
            )}
         </Carousel>
      </Box>
   )
}