"use client"
import { keyWibu, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaTrash, FaUsers } from 'react-icons/fa6';
import { MdEdit } from 'react-icons/md';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteCalenderById } from '../lib/api_calender';

export default function DrawerDetailEvent({ idCalendar, close }: { idCalendar: string, close: (val: boolean) => void }) {
  const router = useRouter()
  const [isModal, setModal] = useState(false)
  const param = useParams<{ id: string, detail: string }>()
  const tema = useHookstate(TEMA)
  const [loadingDelete, setLoadingDelete] = useState(false)
  const [dataRealTime, setDataRealtime] = useWibuRealtime({
    WIBU_REALTIME_TOKEN: keyWibu,
    project: "sdm"
  })

  async function fetchDeleteCalender() {
    try {
      setLoadingDelete(true)
      const response = await funDeleteCalenderById(idCalendar)
      if (response.success) {
        setDataRealtime([
          {
            category: "calendar-detail-delete",
            id: idCalendar,
            idUserFrom: response.user
          },
          {
            category: "calendar-event",
            division: param.id,
            date: response.data.dateStart,
          }
        ])
        toast.success(response.message)
        router.push(`/division/${param.id}/calender`)
      } else {
        toast.error(response.message)
      }
    } catch (error) {
      console.error(error);
      toast.error("Gagal hapus acara, coba lagi nanti");
    } finally {
      close(true)
      setLoadingDelete(false)
      setModal(false)
    }
  }

  return (
    <Box>
      <Stack pt={10}>
        <SimpleGrid
          cols={{ base: 3, sm: 3, lg: 3 }}
          style={{
            alignContent: 'flex-start',
            alignItems: 'flex-start',
          }}
        >
          <Flex onClick={() => router.push(`/division/${param.id}/calender/${param.detail}/add-member`)} justify={'center'} align={'center'} direction={'column'} >
            <Box>
              <FaUsers size={30} color={tema.get().utama} />
            </Box>
            <Box>
              <Text c={tema.get().utama} ta={"center"}>Tambah Anggota</Text>
            </Box>
          </Flex>
          <Flex onClick={() => router.push(`/division/${param.id}/calender/update/${idCalendar}`)} justify={'center'} align={'center'} direction={'column'} >
            <Box>
              <MdEdit size={30} color={tema.get().utama} />
            </Box>
            <Box>
              <Text c={tema.get().utama}>Edit Acara</Text>
            </Box>
          </Flex>
          <Flex onClick={() => setModal(true)} justify={'center'} align={'center'} direction={'column'} >
            <Box>
              <FaTrash size={30} color={tema.get().utama} />
            </Box>
            <Box>
              <Text ta={"center"} c={tema.get().utama}>Hapus Acara</Text>
            </Box>
          </Flex>
        </SimpleGrid>
      </Stack>
      <LayoutModal loading={loadingDelete} opened={isModal} onClose={() => setModal(false)}
        description="Apakah Anda yakin ingin menghapus data acara ini? Data ini akan mempengaruhi semua data yang terkait"
        onYes={(val) => {
          if (val) {
            fetchDeleteCalender()
          } else {
            setModal(false)
          }
        }} />
    </Box>
  );
}
