"use client"
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { globalIsAdminDivision, globalIsMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import "moment/locale/id";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { GrChatOption } from "react-icons/gr";
import { HiMenu } from "react-icons/hi";
import { VscSend } from "react-icons/vsc";
import { useWibuRealtime } from "wibu-realtime";
import { funGetOneDiscussionGeneral } from "../lib/api_discussion_general";
import { IComentsDisscussionGeneral, IDetailDiscussionGeneral } from "../lib/type_discussion_general";
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
import DrawerDetailDiscussionGeneral from "./drawer_detail_discussion_general";
import { BiSolidCommentDetail } from "react-icons/bi";

export default function DetailDiscussionGeneral() {
   const [isData, setData] = useState<IDetailDiscussionGeneral>()
   const [isDataKomentar, setDataKomentar] = useState<IComentsDisscussionGeneral[]>([])
   const [isComent, setIsComent] = useState("")
   const param = useParams<{ id: string }>()
   const [isLoad, setIsLoad] = useState(true)
   const [loadingKomentar, setLoadingKomentar] = useState(false)
   const refresh = useHookstate(globalRefreshDiscussionGeneral)
   const roleLogin = useHookstate(globalRole)
   const [isCreator, setCreator] = useState(false)
   const [isUser, setUser] = useState('')
   const adminLogin = useHookstate(globalIsAdminDivision)
   const memberDivision = useHookstate(globalIsMemberDivision)
   const tema = useHookstate(TEMA)
   const router = useRouter()
   const [openDrawer, setOpenDrawer] = useState(false)
   const isMobile = useMediaQuery('(max-width: 369px)')
   const isMobile2 = useMediaQuery("(max-width: 438px)")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
      WIBU_REALTIME_TOKEN: keyWibu,
      project: "sdm"
   })

   const getData = async (loading: boolean) => {
      try {
         setIsLoad(loading)
         const response = await funGetOneDiscussionGeneral(param.id, "?cat=detail")
         if (response.success) {
            setData(response.data)
         } else {
            toast.error(response.message)
         }
      } catch (error) {
         console.error(error)
         toast.error("Gagal mendapatkan data, coba lagi nanti")
      } finally {
         setIsLoad(false)
      }
   }

   useShallowEffect(() => {
      getData(true)
   }, [refresh.get()])

   // useShallowEffect(() => {
   //    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == param.id)) {
   //       getData(false)
   //    }

   //    if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-delete' && i.id == param.id && i.user != isUser)) {
   //       toast.error("Data telah di hapus, anda akan beralih ke halaman list diskusi")
   //       setTimeout(() => {
   //          router.push(`/division/${param.id}/discussion`)
   //       }, 1000)
   //    }
   // }, [dataRealTime])

   async function getKomentar(loading: boolean) {
      try {
         setLoadingKomentar(loading)
         const response = await funGetOneDiscussionGeneral(param.id, "?cat=komentar")
         if (response.success) {
            setData(response.data)
         } else {
            toast.error(response.message)
         }
      } catch (error) {
         console.error(error)
      } finally {
         setLoadingKomentar(false)
      }
   }

   // const sendComent = async () => {
   //    try {
   //       if (isComent.trim() == "") {
   //          return toast.error("Masukkan Komentar Anda")
   //       }
   //       const response = await funCreateComent(id, { comment: isComent, idDiscussion: param.detail })

   //       if (response.success) {
   //          setIsComent("")
   //          setDataRealtime([{
   //             category: "discussion-detail",
   //             id: id,
   //          }])
   //          reloadData()
   //       } else {
   //          toast.error(response.message)
   //       }
   //    } catch (error) {
   //       console.error(error)
   //    }
   // }





   return (
      <Box>
         <LayoutNavbarNew back={`/discussion`} title="Diskusi"
            menu={
               ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
                  <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                     <HiMenu size={20} color='white' />
                  </ActionIcon>
                  : <></>
            }
         />
         <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
            <DrawerDetailDiscussionGeneral onSuccess={(val) => setOpenDrawer(false)} id={param.id} status={Number(isData?.status)} />
         </LayoutDrawer>


         <Box p={20}>
            {isLoad ?
               Array(1)
                  .fill(null)
                  .map((_, i) => (
                     <Box key={i} pl={5} pr={5}>
                        <Box>
                           <Flex
                              justify={"space-between"}
                              align={"center"}

                           >
                              <Group>
                                 <Skeleton width={60} height={60} radius={100} />
                                 <Box>
                                    <Skeleton width={80} height={20} radius={"md"} />
                                    <Skeleton mt={8} width={60} height={20} radius={"md"} />
                                 </Box>
                              </Group>
                              <Skeleton width={"20%"} height={20} radius={"md"} />
                           </Flex>
                           <Box mt={10}>
                              <Skeleton width={"100%"} height={100} radius={"md"} />
                           </Box>
                        </Box>
                     </Box>
                  )) :
               <>
                  {isDataKomentar?.length == 0 ?
                     <Box mb={60} pl={5} pr={5}>
                        <Grid align='center'>
                           <Grid.Col span={1}>
                              <ActionIcon
                                 variant="gradient"
                                 size={50}
                                 aria-label="Gradient action icon"
                                 radius={100}
                                 bg={tema.get().bgFiturHome}
                              >
                                 <BiSolidCommentDetail size={25} color={tema.get().utama} />
                              </ActionIcon>
                           </Grid.Col>
                           <Grid.Col span={8}>
                              <Box pl={isMobile2 ? 40 : 30}>
                                 <Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
                                 <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                              </Box>
                           </Grid.Col>
                           <Grid.Col span={3}>
                              <Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
                                 {isData?.createdAt}
                              </Text>
                           </Grid.Col>
                        </Grid>
                        <Box mt={10}>
                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                              <Text
                                 style={{
                                    overflowWrap: "break-word"
                                 }}
                                 fw={"bold"}
                              >
                                 {isData?.desc}
                              </Text>
                           </Spoiler>
                        </Box>
                        <Group justify="space-between" mt={30} c={'#8C8C8C'}>
                           {isDataKomentar?.length ? <Group gap={5} align="center">
                              <GrChatOption size={18} />
                              <Text fz={13}>{isDataKomentar?.length} Komentar</Text>
                           </Group > : ""}

                        </Group>
                     </Box>
                     :
                     <Box mb={20}>
                        <Grid align='center'>
                           <Grid.Col span={1}>
                              <ActionIcon
                                 variant="gradient"
                                 size={50}
                                 aria-label="Gradient action icon"
                                 radius={100}
                                 bg={tema.get().bgFiturHome}
                              >
                                 <BiSolidCommentDetail size={25} color={tema.get().utama} />
                              </ActionIcon>
                           </Grid.Col>
                           <Grid.Col span={8}>
                              <Box pl={isMobile2 ? 40 : 30}>
                                 <Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
                                 <Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
                              </Box>
                           </Grid.Col>
                           <Grid.Col span={3}>
                              <Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
                                 {isData?.createdAt}
                              </Text>
                           </Grid.Col>
                        </Grid>
                        <Box mt={10}>
                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                              <Text
                                 style={{
                                    overflowWrap: "break-word"
                                 }}
                                 fw={"bold"}
                              >
                                 {isData?.desc}
                              </Text>
                           </Spoiler>
                        </Box>
                        <Group justify="space-between" mt={30} c={'#8C8C8C'}>
                           {isDataKomentar?.length ? <Group gap={5} align="center">
                              <GrChatOption size={18} />
                              <Text fz={13}>{isDataKomentar.length} Komentar</Text>
                           </Group > : ""}

                        </Group>
                     </Box>
                  }
               </>
            }
            <Box pl={10} pr={10} mb={60}>
               {isLoad ?
                  Array(2)
                     .fill(0)
                     .map((_, i) => (
                        <Box key={i} p={10}>
                           <Box>
                              <Flex
                                 justify={"space-between"}
                                 align={"center"}
                                 mt={20}
                              >
                                 <Group>
                                    <Skeleton width={40} height={40} radius={100} />
                                    <Box>
                                       <Skeleton width={60} height={20} radius={"md"} />
                                    </Box>
                                 </Group>
                                 <Skeleton width={"50%"} height={20} radius={"md"} />
                              </Flex>
                              <Box mt={10}>
                                 <Skeleton width={"100%"} height={50} radius={"md"} />
                              </Box>
                              <Group justify="space-between" mt={20} c={'#8C8C8C'}>
                                 <Skeleton width={"30%"} height={20} radius={"md"} />
                              </Group>
                           </Box>
                           <Box mt={20}>
                              <Skeleton width={"100%"} height={1} radius={"md"} />
                           </Box>
                        </Box>
                     )) :
                  isDataKomentar.map((v, i) => {
                     return (
                        <Box key={i} p={10} >
                           <Grid align="center">
                              <Grid.Col span={1}>
                                 <Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} />
                              </Grid.Col>
                              <Grid.Col span={8}>
                                 <Box>
                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 25 : 15} fz={isMobile ? 15 : 16}>
                                       {v.username}
                                    </Text>
                                 </Box>
                              </Grid.Col>
                              <Grid.Col span={3}>
                                 <Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
                              </Grid.Col>
                           </Grid>
                           <Box mt={10}>
                              <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                                 <Text
                                    style={{
                                       overflowWrap: "break-word"
                                    }}
                                 >
                                    {v.comment}
                                 </Text>
                              </Spoiler>
                           </Box>
                           <Box mt={20}>
                              <Divider size={"xs"} />
                           </Box>
                        </Box>
                     );
                  })
               }
            </Box>
         </Box>
         {isLoad ?
            <Skeleton width={"100%"} height={50} radius={100} />
            :
            <Box pos={'fixed'} bottom={0} w={"100%"} style={{
               maxWidth: rem(550)
            }} pl={rem(15)} pr={rem(15)} bg={tema.get().bgUtama}>
               <Box bg={tema.get().bgUtama} >
                  <Group justify="flex-end">
                     <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
                  </Group>
                  <Box mb={20} bg={tema.get().bgUtama}>
                     <Grid bg={"white"} style={{
                        border: '1px solid gray',
                        borderRadius: 40
                     }} justify="center" align="center">
                        <Grid.Col span={10}>
                           <TextInput
                              styles={{
                                 input: {
                                    color: tema.get().utama,
                                    border: "none",
                                    backgroundColor: "transparent"
                                 },
                              }}
                              size="md"
                              placeholder="Kirim Komentar"
                              disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
                              onChange={(e) => setIsComent(e.target.value)}
                              value={isComent}
                              maxLength={300}
                           />

                        </Grid.Col>
                        <Grid.Col span={2}>
                           <Center>
                              <ActionIcon
                                 // onClick={sendComent}
                                 variant="subtle" aria-label="submit" disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
                                 <VscSend size={30} />
                              </ActionIcon>
                           </Center>
                        </Grid.Col>
                     </Grid>
                  </Box>
               </Box>
            </Box>
         }
      </Box>
   )
}