'use client'
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Spoiler, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
import { LuClock, LuCopy, LuLink } from "react-icons/lu";
import { FaCheck, FaUser } from 'react-icons/fa6';
import { TbCopy } from 'react-icons/tb';
import { HiMenu } from 'react-icons/hi';
import DrawerDetailEvent from './drawer_detail_event';
import { useParams, useRouter } from 'next/navigation';
import { funGetOneCalender } from '../lib/api_calender';
import { useShallowEffect } from '@mantine/hooks';
import moment from "moment";
import "moment/locale/id";
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
import SkeletonDetailEvent from './skeleton_detail_event';
import { IoIosCloseCircle } from 'react-icons/io';
import LayoutModal from '@/module/_global/layout/layout_modal';

export default function DetailEventDivision() {
  const param = useParams<{ id: string, detail: string }>()
  const [isDataCalender, setDataCalender] = useState<IDataDetailByIdCalender>()
  const [isDataAnggota, setDataAnggota] = useState<IDataDetailByIdMember[]>([])
  const [isLengthMember, setLengthMember] = useState()
  const [loading, setLoading] = useState(true)
  const [openDrawer, setOpenDrawer] = useState(false)
  const [openDrawerUser, setOpenDrawerUser] = useState(false)
  const [isOpenModal, setOpenModal] = useState(false)
  const router = useRouter()


  const getData = async () => {
    try {
      setLoading(true)
      const response = await funGetOneCalender(param.detail)
      setDataCalender(response.data.calender)
      setDataAnggota(response.data.member)
      setLengthMember(response.data.total)
      setLoading(false)
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
    }
  }

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

  return (
    <Box>
      <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Detail Kalender"
        menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
          <HiMenu size={20} color='white' />
        </ActionIcon>} />
      <Box p={20}>
        {loading
          ?
          <SkeletonDetailEvent />
          :
          <Box style={{
            border: `1px solid ${"#D8D8F1"}`,
            padding: 20,
            borderRadius: 10
          }}>
            <Stack>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <BsCalendar2Event size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  <Text>{isDataCalender?.title}</Text>
                </Grid.Col>
              </Grid>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <BsCalendarDate size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  <Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
                </Grid.Col>
              </Grid>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <LuClock size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  <Text>{isDataCalender?.timeStart}  | {isDataCalender?.timeEnd} </Text>
                </Grid.Col>
              </Grid>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <BsCalendarDate size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  <Text>
                    {isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
                      isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
                        isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
                          isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
                            isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
                              ''}
                  </Text>
                </Grid.Col>
              </Grid>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <LuLink size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  {isDataCalender?.linkMeet ? (
                    <Group justify='space-between'>
                      <Box w={{
                        base: 170,
                        xl: 380
                      }}>
                        <Text lineClamp={1}>{isDataCalender?.linkMeet}</Text>
                      </Box>
                      <CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
                        {({ copied, copy }) => (
                          <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
                            <ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
                              {copied ? (
                                <FaCheck size={20} />
                              ) : (
                                <TbCopy size={20} />
                              )}
                            </ActionIcon>
                          </Tooltip>
                        )}
                      </CopyButton>
                    </Group>
                  ) : (
                    <Text>-</Text>
                  )
                  }
                </Grid.Col>
              </Grid>
              <Grid gutter={"lg"}>
                <Grid.Col span={{
                  base: 2,
                  xl: 1
                }}>
                  <MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
                </Grid.Col>
                <Grid.Col span={{
                  base: 10,
                  xl: 11
                }}>
                  {isDataCalender?.desc ? (
                    <Spoiler maxHeight={80} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
                      <Text>{isDataCalender?.desc}</Text>
                    </Spoiler>
                  ) : (
                    <Text>-</Text>
                  )
                  }
                </Grid.Col>
              </Grid>
            </Stack>
          </Box>
        }

        {
          loading ?
            <Box pt={20}>
              <Box
                style={{
                  border: `1px solid ${"#C7D6E8"}`,
                  borderRadius: 10,
                }}
                px={20}
                pb={20}
              >
                {Array(4)
                  .fill(null)
                  .map((_, i) => (
                    <Box
                      key={i}
                    >
                      <SkeletonSingle />
                    </Box>
                  ))}
              </Box>
            </Box>
            :

            <Box pt={20}>
              <Group justify='space-between'>
                <Text fw={"bold"}>Total Anggota</Text>
                <Text>{isLengthMember} Anggota</Text>
              </Group>
              <Box mb={20}>
                <Box
                  style={{
                    border: `1px solid ${"#C7D6E8"}`,
                    borderRadius: 10,
                  }}
                  px={20}
                  pt={20}
                >
                  {
                    isLengthMember == 0 ? (
                      <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
                        <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
                      </Box>
                    ) :
                      <Box>
                        {
                          isDataAnggota.map((v, i) => {
                            return (
                              <Box onClick={() => setOpenDrawerUser(true)} key={i}>
                                <Box my={10}>
                                  <Grid align='center' gutter={"lg"}>
                                    <Grid.Col span={{
                                      base: 3,
                                      xl: 2
                                    }}>
                                      <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
                                    </Grid.Col>
                                    <Grid.Col span={{
                                      base: 9,
                                      xl: 10
                                    }}>
                                      <Flex justify='space-between' align={"center"}>
                                        <Flex direction={'column'} align="flex-start" justify="flex-start">
                                          <Text lineClamp={1}>{v.name}</Text>
                                          <Text c={"#5A687D"} fz={14} lineClamp={1}>
                                            {v.email}
                                          </Text>
                                        </Flex>
                                      </Flex>
                                    </Grid.Col>
                                  </Grid>
                                  <Box mt={10}>
                                    <Divider size={"xs"} />
                                  </Box>
                                </Box>
                              </Box>
                            )
                          })
                        }
                      </Box>
                  }
                </Box>
              </Box>
            </Box>
        }
      </Box>



      <LayoutDrawer opened={openDrawerUser} title={<Text lineClamp={1}>Menu</Text>} onClose={() => setOpenDrawerUser(false)}>
        <Box>
          <Stack pt={10}>
            <SimpleGrid
              cols={{ base: 2, sm: 3, lg: 3 }}
            >
              <Flex
                // onClick={() => { router.push('/member/' + ) }}
                justify={'center'} align={'center'} direction={'column'} >
                <Box>
                  <FaUser size={30} color={WARNA.biruTua} />
                </Box>
                <Box>
                  <Text c={WARNA.biruTua}>Lihat profil</Text>
                </Box>
              </Flex>

              <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                <Box>
                  <IoIosCloseCircle size={30} color={WARNA.biruTua} />
                </Box>
                <Box>
                  <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
                </Box>
              </Flex>
            </SimpleGrid>
          </Stack>
        </Box>
      </LayoutDrawer>

      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
        description="Apakah Anda yakin ingin mengeluarkan anggota?"
        onYes={(val) => {
          if (val) {
            // onSubmit()
          }
          setOpenModal(false)
        }} />
      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
        <DrawerDetailEvent />
      </LayoutDrawer>
    </Box>
  );
}