'use client'
import { urlCompleted } from '@/lib/urlCompleted';
import { globalRole, keyWibu, LayoutDrawer, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaTrash } from 'react-icons/fa6';
import { LuLink } from 'react-icons/lu';
import { RiExternalLinkLine } from 'react-icons/ri';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteLinkProject, funGetOneProjectById } from '../lib/api_project';
import { IDataLinkProject } from '../lib/type_project';
import { globalIsMemberProject } from '../lib/val_project';

export default function ListLinkDetailProject() {
   const [isData, setData] = useState<IDataLinkProject[]>([])
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
   const [loadingDelete, setLoadingDelete] = useState(false)
   const [idData, setIdData] = useState('')
   const [linkData, setLinkData] = useState('')
   const [openDrawer, setOpenDrawer] = useState(false)
   const [isOpenModal, setOpenModal] = useState(false)
   const tema = useHookstate(TEMA)
   const roleLogin = useHookstate(globalRole)
   const memberProject = useHookstate(globalIsMemberProject)
   const isMobile = useMediaQuery("(max-width: 350px)");
   const [reason, setReason] = useState("")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
      WIBU_REALTIME_TOKEN: keyWibu,
      project: "sdm"
   })

   async function getOneDataCancel() {
      try {
         const res = await funGetOneProjectById(param.id, 'data');
         if (res.success) {
            setReason(res.data.reason);
         } else {
            toast.error(res.message);
         }

      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
      }
   }

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

   async function getOneData(loading: boolean) {
      try {
         setLoading(loading)
         const res = await funGetOneProjectById(param.id, 'link');
         if (res.success) {
            setData(res.data)
         } else {
            toast.error(res.message);
         }

      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan link kegiatan, coba lagi nanti");
      } finally {
         setLoading(false)
      }
   }

   useShallowEffect(() => {
      getOneData(true);
   }, [param.id])


   async function onDelete() {
      try {
         setLoadingDelete(true)
         const res = await funDeleteLinkProject(param.id, { idLink: idData });
         if (res.success) {
            setDataRealtime([{
               category: "project-detail-link",
               id: param.id,
            }])
            toast.success(res.message)
            getOneData(false)
            setIdData("")
            setOpenDrawer(false)
         } else {
            toast.error(res.message);
         }
      } catch (error) {
         console.error(error);
         toast.error("Gagal menghapus link, coba lagi nanti");
      } finally {
         setOpenModal(false)
         setLoadingDelete(false)
      }

   }

   useShallowEffect(() => {
      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-link' && i.id == param.id)) {
         getOneData(false)
      } else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
         getOneDataCancel()
      }
   }, [dataRealTime])

   return (
      <>
         {
            isData.length > 0
            &&
            <Box pt={20}>
               <Text fw={'bold'} c={tema.get().utama}>Link</Text>
               <Box bg={"white"} style={{
                  borderRadius: 10,
                  border: `1px solid ${"#D6D8F6"}`,
                  padding: 20
               }}>
                  {
                     isData.map((item, index) => {
                        return (
                           <Box
                              key={index}
                              style={{
                                 borderRadius: 10,
                                 border: `1px solid ${"#D6D8F6"}`,
                                 padding: 10
                              }}
                              mb={10}

                              onClick={() => {
                                 setLinkData(item.link)
                                 setIdData(item.id)
                                 setOpenDrawer(true)
                              }}
                           >
                              <Grid justify='center' align='center'>
                                 <Grid.Col span={{
                                    base: 1.5,
                                    xs: 1,
                                    sm: 1,
                                    md: 1,
                                    lg: 1,
                                    xl: 1,
                                 }}>
                                    <LuLink size={30} />
                                 </Grid.Col>
                                 <Grid.Col
                                    span={{
                                       base: 10.5,
                                       xs: 11,
                                       sm: 11,
                                       md: 11,
                                       lg: 11,
                                       xl: 11,
                                    }}
                                 >
                                    <Text style={{
                                       overflowWrap: "break-word"
                                    }} pl={isMobile ? 10 : 0} truncate="end">{item.link}</Text>
                                 </Grid.Col>
                              </Grid>
                              <Group>
                              </Group>
                           </Box>
                        )
                     })
                  }
               </Box>


               <LayoutDrawer opened={openDrawer} title={<Text truncate="end">Menu</Text>} onClose={() => setOpenDrawer(false)}>
                  <Box>
                     <Stack pt={10}>
                        <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
                           {
                              <Flex onClick={() => { window.open(urlCompleted(linkData), '_blank', 'noopener,noreferrer') }} justify={'center'} align={'center'} direction={'column'} >
                                 <Box>
                                    <RiExternalLinkLine size={30} color={tema.get().utama} />
                                 </Box>
                                 <Box>
                                    <Text c={tema.get().utama}>Buka Link</Text>
                                 </Box>
                              </Flex>
                           }

                           {
                              (roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberProject.get() ? <></>
                                 :
                                 <Flex onClick={() => {
                                    reason == null ?
                                       setOpenModal(true)
                                       : setOpenModal(false)
                                 }} justify={'center'} align={'center'} direction={'column'} >
                                    <Box>
                                       <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
                                    </Box>
                                    <Box>
                                       <Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
                                    </Box>
                                 </Flex>
                           }
                        </SimpleGrid>
                     </Stack>
                  </Box>
               </LayoutDrawer>


               <LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
                  description="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
                  onYes={(val) => {
                     if (val) {
                        onDelete()
                     } else {
                        setOpenModal(false)
                     }
                  }} />

            </Box>
         }
      </>
   );
}

