'use client'
import { keyWibu, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Spoiler, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funGetTaskDivisionById } from '../lib/api_task';
import { globalRefreshTask } from '../lib/val_task';


export default function ListReportDetailTask() {
   const [isData, setData] = useState("")
   const param = useParams<{ id: string, detail: string }>()
   const refresh = useHookstate(globalRefreshTask)
   const tema = useHookstate(TEMA)
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
      WIBU_REALTIME_TOKEN: keyWibu,
      project: "sdm"
   })


   async function getOneData() {
      try {
         const res = await funGetTaskDivisionById(param.detail, 'data');
         if (res.success) {
            setData(res.data.report)
         } else {
            toast.error(res.message);
         }
      } catch (error) {
         console.error(error);
         toast.error("Gagal mendapatkan list Laporan Kegiatan, coba lagi nanti");
      }
   }

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


   useShallowEffect(() => {
      if (dataRealTime && dataRealTime.some((i: any) => i.category == 'tugas-detail-report' && i.id == param.detail)) {
         refresh.set(true)
         getOneData()
      }

   }, [dataRealTime])

   return (
      <>
         {
            isData != "" && isData != null
            &&
            <Box pt={20}>
               <Text fw={"bold"} c={tema.get().utama}>
                  Laporan Kegiatan
               </Text>
               <Box
                  bg={"white"}
                  style={{
                     borderRadius: 10,
                     border: `1px solid ${"#D6D8F6"}`,
                  }}
                  pt={10}
                  pb={10}
                  pl={20}
                  pr={20}
               >
                  <Spoiler maxHeight={50} showLabel="Lihat Detail" hideLabel="Tutup Detail">
                     <Text style={{ overflowWrap: "break-word", whiteSpace: "pre-line" }}>
                        {isData}
                     </Text>
                  </Spoiler>
               </Box>
            </Box>
         }
      </>
   );
}

