"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BiSolidUserBadge } from "react-icons/bi";
import { FaBuildingUser, FaSquarePhone } from "react-icons/fa6";
import { LuLogOut } from "react-icons/lu";
import { MdEmail } from "react-icons/md";
import { PiGenderIntersexFill } from "react-icons/pi";
import { RiIdCardFill } from "react-icons/ri";
import { funGetProfileByCookies } from "../lib/api_profile";
import { IProfileById } from "../lib/type_profile";

export default function Profile() {
  const [openModal, setOpenModal] = useState(false);
  const [roleUser, setRoleUser] = useState("")
  const [isData, setData] = useState<IProfileById>()
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [img, setIMG] = useState<any | null>()
  const tema = useHookstate(TEMA)
  const [loadingModal, setLoadingModal] = useState(false)

  async function getData() {
    try {
      setLoading(true)
      const res = await funGetProfileByCookies()
      setData(res.data)
      setRoleUser(res.data.idUserRole)
      setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`)
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false)
    }
  }

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

  async function onLogout(val: boolean) {
    try {
      if (val) {
        setLoadingModal(true)
        await fetch('/api/auth/logout', {
          method: 'DELETE',
        });
        toast.success('Logout Sukses')
        window.location.href = '/';
      }
    } catch (error) {
      console.error(error);
      toast.error("Logout gagal, coba lagi nanti");
    } finally {
      setLoadingModal(false)
      setOpenModal(false)
    }
  }
  return (
    <>
      <Box >
        <LayoutNavbarHome  >
          <Group justify="space-between">
            <LayoutIconBack back="/home" />
            <ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Info">
              <LuLogOut size={20} color='white' />
            </ActionIcon>
          </Group>
          <Stack
            align="center"
            justify="center"
            gap="xs"
          >
            {loading ? <Skeleton height={100} radius={"100"} width={100} /> :
              <Avatar
                size="100"
                radius={"100"}
                src={img}
              />
            }
            {/* <SkeletonAvatar size="100" sizeNoImg="100" img={img} /> */}
            {loading ?
              <Skeleton height={62} mt={10} width={"40%"} />
              :
              <>
                <Text c={'white'} fw={'bold'} fz={25} ta={"center"}>{isData?.name}</Text>
                <Text c={'white'} fw={'lighter'} fz={15}>{isData?.role}</Text>
              </>
            }
          </Stack>
        </LayoutNavbarHome>
        {loading
          ?
          <SkeletonDetailProfile />
          :
          <Stack p={20}>
            <Group justify="space-between" grow py={5}>
              <Text fw={'bold'} fz={20}>Informasi</Text>
              {
                roleUser != "developer" &&
                <Group justify="flex-end">
                  <Text style={{ cursor: 'pointer' }} ta={"right"} c={"blue"} onClick={() => router.push(`/profile/edit/`)}>Edit</Text>
                </Group>
              }
            </Group>
            <Grid>
              <Grid.Col span={4}>
                <Group>
                  <RiIdCardFill size={25} />
                  <Text fz={15}>NIK</Text>
                </Group>
              </Grid.Col>
              <Grid.Col span={8}>
                <Text fz={15} fw={'bold'} ta={"right"}>{isData?.nik}</Text>
              </Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={5}>
                <Group>
                  <FaBuildingUser size={25} />
                  <Text fz={15}>Lembaga Desa</Text>
                </Group>
              </Grid.Col>
              <Grid.Col span={7}>
                <Text fz={15} fw={'bold'} ta={"right"}>{isData?.group}</Text>
              </Grid.Col>
            </Grid>
            {
              roleUser != "developer" &&
              <Grid>
                <Grid.Col span={4}>
                  <Group>
                    <BiSolidUserBadge size={25} />
                    <Text fz={15}>Jabatan</Text>
                  </Group>
                </Grid.Col>
                <Grid.Col span={8}>
                  <Text fz={15} fw={'bold'} ta={"right"}>{isData?.position}</Text>
                </Grid.Col>
              </Grid>
            }
            <Grid>
              <Grid.Col span={5}>
                <Group>
                  <FaSquarePhone size={25} />
                  <Text fz={15}>No Telepon</Text>
                </Group>
              </Grid.Col>
              <Grid.Col span={7}>
                <Text fz={15} fw={'bold'} ta={"right"}>+62{isData?.phone}</Text>
              </Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={4}>
                <Group>
                  <MdEmail size={25} />
                  <Text fz={15}>Email</Text>
                </Group>
              </Grid.Col>
              <Grid.Col span={8}>
                <Text fz={15} fw={'bold'} ta={"right"} lineClamp={1}>{isData?.email}</Text>
              </Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={6}>
                <Group>
                  <PiGenderIntersexFill size={25} />
                  <Text fz={15}>Jenis Kelamin</Text>
                </Group>
              </Grid.Col>
              <Grid.Col span={6}>
                <Text fz={15} fw={'bold'} ta={"right"}>
                  {isData?.gender === 'M' ? 'Laki-laki' : isData?.gender === 'F' ? 'Perempuan' : ''}
                </Text>
              </Grid.Col>
            </Grid>
          </Stack>
        }
      </Box>
      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
        description="Apakah Anda yakin ingin keluar?"
        onYes={(val) => onLogout(val)} />
    </>
  )
}

