"use client";
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure } from '@nextui-org/react'
import { MoreVerticalIcon } from 'lucide-react'
import React, { useState, useEffect } from 'react'
import ImportModal from './ImportModal';
import ProductModal from './ProductModal';
import getClientCredential from '@/common/libs/getClientCredential';

type Credential = {
  team: string;
};

const MoreMenu = () => {
  const [credential, setCredential] = useState<Credential | null>(null);
  const importModal = useDisclosure();
  const productModal = useDisclosure();

  useEffect(() => {
    const cred = getClientCredential();
    setCredential(cred);
  }, []);

  if (!credential || credential.team !== 'VERIFICATION') {
    return null;
  }

  return credential && credential.team == 'VERIFICATION' && (
    <>
      <Dropdown>
        <DropdownTrigger>
          <Button variant="flat" className="px-2.5 min-w-fit">
            <MoreVerticalIcon size={20} />
          </Button>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem key="product" onPress={productModal.onOpen}>
            Product List
          </DropdownItem>
          <DropdownItem key="import" onPress={importModal.onOpen}>
            Import Product
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <ProductModal modal={productModal} />
      <ImportModal modal={importModal} />
    </>
  )
}

export default MoreMenu