"use client"
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, rem, Tabs, Text, TextInput, Title } from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md';
import { RiCircleFill } from "react-icons/ri";
import { useRouter } from 'next/navigation';
import { TbClockPause } from 'react-icons/tb';
import { IoIosCheckmarkCircleOutline } from 'react-icons/io';
import { IoCloseCircleOutline } from 'react-icons/io5';
import ListProject from './list_project';
import MenuDrawerProject from './menu_drawer_project';

export default function TabProject() {
  const [openDrawer, setOpenDrawer] = useState(false)

  const iconStyle = { width: rem(20), height: rem(20) };

  const tabsData = [
    {
      value: 'segera',
      label: 'Proyek Proses',
      mobileLabel: 'Proses',
      icon: <TbClockPause style={iconStyle} />,
    },
    {
      value: 'selesai',
      label: 'Proyek Selesai',
      mobileLabel: 'Selesai',
      icon: <IoIosCheckmarkCircleOutline style={iconStyle} />,
    },
    {
      value: 'batal',
      label: 'Proyek Batal',
      mobileLabel: ' Batal',
      icon: <IoCloseCircleOutline style={iconStyle} />,
    },
  ];
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 495) {
        setIsMobile(true);
      } else {
        setIsMobile(false);
      }
    };
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <Box>
      <LayoutNavbarNew back='/home' title='proyek'
        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}>
        <Tabs variant="pills" radius="xl" defaultValue="segera">
          <Tabs.List grow justify='center'>
            {tabsData.map((tab) => (
              <Tabs.Tab
                key={tab.value}
                value={tab.value}
                color={WARNA.biruTua}
                leftSection={tab.icon}
              >
                {isMobile ? tab.mobileLabel : tab.label}
              </Tabs.Tab>
            ))}
          </Tabs.List>

          <Tabs.Panel value="segera">
            <ListProject/>
          </Tabs.Panel>

          <Tabs.Panel value="selesai">
            <ListProject/>
          </Tabs.Panel>

          <Tabs.Panel value="batal">
            <ListProject/>
          </Tabs.Panel>
        </Tabs>
      </Box>

      <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
        <MenuDrawerProject/>
      </LayoutDrawer>
    </Box>
  );
}