'use client'
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { Link, RichTextEditor } from "@mantine/tiptap";
import Color from "@tiptap/extension-color";
import Highlight from '@tiptap/extension-highlight';
import TextAlign from "@tiptap/extension-text-align";
import TextStyle from "@tiptap/extension-text-style";
import Underline from "@tiptap/extension-underline";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { IoIosArrowForward } from "react-icons/io";
import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
import { GroupData } from "../lib/type_announcement";
import { globalMemberEditAnnouncement } from "../lib/val_announcement";
import EditChooseMember from "./edit_choose_member";

export default function EditAnnouncement() {
   const [isOpen, setOpen] = useState(false)
   const [isChooseDivisi, setChooseDivisi] = useState(false)
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
   const [loadingSubmit, setLoadingSubmit] = useState(false)
   const router = useRouter()
   const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
      title: false,
      desc: false
   });
   const [body, setBody] = useState({
      title: "",
      desc: "",
   })
   const memberGroup = useHookstate(globalMemberEditAnnouncement)

   const editor = useEditor({
      extensions: [
         StarterKit,
         Underline,
         Link,
         Highlight,
         TextStyle,
         Color,
         TextAlign.configure({ types: ['heading', 'paragraph'] }),
      ],
      content: body.desc,
   });


   async function fetchOneAnnouncement() {
      try {
         setLoading(true)
         memberGroup.set([])
         const res = await funGetAnnouncementById(param.id)
         if (res.success) {
            setBody({
               title: res.data.title,
               desc: res.data.desc
            })

            const arrNew: GroupData[] = []
            const coba = Object.keys(res.member).map((v: any, i: any) => {
               const newObject = {
                  "id": res.member[v][0].idGroup,
                  "name": v,
                  "Division": res.member[v]
               }

               res.member[v].map((v: any, i: any) => {
                  newObject["Division"][i] = {
                     "id": v.idDivision,
                     "name": v.division
                  }
               })
               arrNew.push(newObject)
            })
            memberGroup.set(arrNew)
         } else {
            toast.error(res.message)
         }

      } catch (error) {
         console.error(error)
         toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
      } finally {
         setLoading(false)
         setOpen(false)
      }
   }


   useShallowEffect(() => {
      fetchOneAnnouncement()
   }, [])

   useShallowEffect(() => {
      editor?.commands.insertContent(body.desc)
   }, [editor, body.desc])

   async function onSubmit() {
      try {
         setLoadingSubmit(true)
         const response = await funEditAnnouncement(param.id, {
            title: body.title,
            desc: String(editor?.getHTML()),
            groups: memberGroup.get() as GroupData[]
         })

         if (response.success) {
            toast.success(response.message)
            router.push(`/announcement/${param.id}`)
         } else {
            toast.error(response.message)
         }
      } catch (error) {
         console.error(error)
         toast.error("Gagal mengedit pengumuman, coba lagi nanti");
      } finally {
         setLoadingSubmit(false)
         setOpen(false)
      }
   }

   function onCheck() {
      if (Object.values(touched).some((v) => v == true) || String(editor?.getHTML()) === "" || String(editor?.getHTML()) === "<p></p>" || String(editor?.getHTML()) === "undefined")
         return toast.error("Error! Judul dan pengumuman tidak boleh kosong")
      if (memberGroup.get().length == 0)
         return toast.error("Error! sila∏hkan pilih divisi")
      setOpen(true)
   }


   function onValidation(kategori: string, val: string) {
      if (kategori == 'title') {
         setBody({ ...body, title: val })
         if (val === "") {
            setTouched({ ...touched, title: true })
         } else {
            setTouched({ ...touched, title: false })
         }
      } else if (kategori == 'desc') {
         if (String(editor?.getHTML()) === "" || String(editor?.getHTML()) === "<p></p>" || String(editor?.getHTML()) === "undefined") {
            setTouched({ ...touched, desc: true })
         } else {
            setTouched({ ...touched, desc: false })
         }
      }
   }

   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />

   return (
      <>
         <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
         <Stack
            align="center"
            justify="center"
            gap="xs"
            pt={30}
            px={20}
         >
            {loading ?

               <>
                  <Skeleton height={40} mt={20} radius={30} />
                  <Skeleton height={75} mt={20} radius={10} />
                  <Skeleton height={40} mt={10} radius={10} />
               </>
               :
               <>
                  <TextInput
                     size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                     styles={{
                        input: {
                           color: tema.get().utama,
                           borderRadius: tema.get().utama,
                           borderColor: tema.get().utama,
                        },
                     }}
                     value={body.title}
                     onChange={(e) => {
                        onValidation('title', e.target.value)
                     }}
                     error={
                        touched.title && (
                           body.title == "" ? "Judul Tidak Boleh Kosong" : null
                        )
                     }
                  />
                  {/* <Textarea
                     size="md"
                     radius={10}
                     w={"100%"}
                     label="Pengumuman"
                     withAsterisk
                     placeholder="Deskripsi Pengumuman"
                     styles={{
                        input: {
                           color: tema.get().utama,
                           borderRadius: tema.get().utama,
                           borderColor: tema.get().utama,
                        },
                     }}
                     value={body.desc}
                     onChange={(e) => { onValidation('desc', e.target.value) }}
                     error={
                        touched.desc && (
                           body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
                        )
                     }
                  /> */}

                  <Box>
                     <Group gap="xs">
                        <Text>Pengumuman</Text>
                        <Text c={'red'}>*</Text>
                     </Group>
                     <RichTextEditor editor={editor} style={{ border: `1px solid ${tema.get().utama}` }}>
                        <RichTextEditor.Toolbar sticky stickyOffset={60}>
                           <RichTextEditor.ControlsGroup>
                              <RichTextEditor.Bold />
                              <RichTextEditor.Italic />
                              <RichTextEditor.Underline />
                              <RichTextEditor.Strikethrough />
                              <RichTextEditor.Highlight />
                           </RichTextEditor.ControlsGroup>

                           <RichTextEditor.ControlsGroup>
                              <RichTextEditor.H1 />
                              <RichTextEditor.H2 />
                              <RichTextEditor.H3 />
                              <RichTextEditor.H4 />
                           </RichTextEditor.ControlsGroup>

                           <RichTextEditor.ControlsGroup>
                              <RichTextEditor.Hr />
                              <RichTextEditor.BulletList />
                              <RichTextEditor.OrderedList />
                           </RichTextEditor.ControlsGroup>

                           <RichTextEditor.ControlsGroup>
                              <RichTextEditor.AlignLeft />
                              <RichTextEditor.AlignCenter />
                              <RichTextEditor.AlignJustify />
                              <RichTextEditor.AlignRight />
                           </RichTextEditor.ControlsGroup>

                           <RichTextEditor.ColorPicker
                              colors={[
                                 '#25262b',
                                 '#868e96',
                                 '#fa5252',
                                 '#e64980',
                                 '#be4bdb',
                                 '#7950f2',
                                 '#4c6ef5',
                                 '#228be6',
                                 '#15aabf',
                                 '#12b886',
                                 '#40c057',
                                 '#82c91e',
                                 '#fab005',
                                 '#fd7e14',
                              ]}
                           />

                           <RichTextEditor.ControlsGroup>
                              <RichTextEditor.Color color="#F03E3E" />
                              <RichTextEditor.Color color="#7048E8" />
                              <RichTextEditor.Color color="#1098AD" />
                              <RichTextEditor.Color color="#37B24D" />
                              <RichTextEditor.Color color="#F59F00" />
                           </RichTextEditor.ControlsGroup>
                           <RichTextEditor.UnsetColor />
                        </RichTextEditor.Toolbar>

                        <RichTextEditor.Content />
                     </RichTextEditor>
                  </Box>

                  <Box pt={10} w={"100%"}>
                     <Group justify="space-between" style={{
                        border: `1px solid ${tema.get().utama}`,
                        maxWidth: rem(550),
                        padding: 10,
                        borderRadius: 10
                     }}

                        onClick={() => { setChooseDivisi(true) }}
                     >
                        <Text size="sm">
                           Tambah divisi penerima pengumuman
                        </Text>
                        <IoIosArrowForward />
                     </Group>
                  </Box>
               </>
            }

         </Stack>
         <Box mb={60} p={20}>
            {loading ?
               Array(3)
                  .fill(null)
                  .map((_, i) => (
                     <Box key={i} mb={20}>
                        <Skeleton height={20} radius={10} mt={20} width={"30%"} />
                        <Skeleton height={20} ml={40} radius={10} mt={10} width={"80%"} />
                        <Skeleton height={20} ml={40} radius={10} mt={20} width={"80%"} />
                     </Box>
                  ))

               :
               <Box pb={50}>
                  <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
                  {
                     memberGroup.get().length == 0 ? <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text> :
                        memberGroup.get().map((v: any, i: any) => {
                           return (
                              <Box key={i} mt={10}>
                                 <Text fw={"bold"}>{v.name}</Text>
                                 <Box pl={20} pr={10}>
                                    <Flex direction={"column"} gap={"md"}>
                                       <List>
                                          {
                                             v.Division.map((division: any) => {
                                                return <List.Item key={division.id}>
                                                   <Text lineClamp={1}>{division.name}</Text>
                                                </List.Item>
                                             })
                                          }
                                       </List>
                                    </Flex>
                                 </Box>
                              </Box>
                           );

                        })
                  }
               </Box>

            }

         </Box>

         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
            maxWidth: rem(550),
            zIndex: 999,
            backgroundColor: `${tema.get().bgUtama}`,
         }}>
            {loading ?
               <Skeleton height={40} radius={30} />
               :
               <Button
                  c={"white"}
                  bg={tema.get().utama}
                  size="lg"
                  radius={30}
                  fullWidth
                  onClick={() => { onCheck() }}
               >
                  Simpan
               </Button>
            }
         </Box>
         <LayoutModal opened={isOpen} loading={loadingSubmit} onClose={() => setOpen(false)}
            description="Apakah Anda yakin ingin mengubah data?"
            onYes={(val) => {
               if (val) {
                  onSubmit()
               } else {
                  setOpen(false)
               }
            }} />
      </>
   )
}