'use client';

import { Button } from '@/shadcn/ui/button';
import { useEffect, useState } from 'react';
import AddModuleForm from './add-module';
import ModuleList from './module-list';
import SideDrawer from '@/src/components/admin/SideDrawer';
import ComponentCard from '@/src/components/admin/common/ComponentCard';
import { Plus } from 'lucide-react';
import { useStateContext } from '@/src/context/admin/StateContext';
import { useTableActions } from '@/src/hooks/admin/useTableAction';
import PageProtection from '@/src/components/admin/common/PageProtection';
 

export default function ModulesPage() {
     const { isDrawerOpen, setIsDrawerOpen, itemID} = useStateContext();
   
     useEffect(() => {
       setIsDrawerOpen(itemID !== undefined);
     }, [itemID, setIsDrawerOpen]);
   
     const { handleAddNew, handleCloseDrawer } = useTableActions(
       "modules",
     );

  return (
    <PageProtection pageSlug='privilege-management.modules'>
     <ComponentCard title="Module Master" desc='Module Master provides a centralized space to create, manage, and update organizational departments, ensuring structured hierarchy and streamlined administration across the company.'>
     <Button onClick={handleAddNew}>
          <Plus size={15} />
            Add Module
          </Button>
   
        <div className="grid grid-cols-1 lg:grid-cols-1 gap-8">
          <div>
            <ModuleList/>
          </div>
        </div>
      
      </ComponentCard>
      <SideDrawer
        isOpen={isDrawerOpen}
        onClose={handleCloseDrawer}
        title={`${itemID ? 'Edit' : 'Add'} Module`}
        width="xxl"
      >
        <AddModuleForm />
      
      </SideDrawer>
    </PageProtection>
  );
}