import { Dispatch, SetStateAction, useState } from "react";
import "./assets/css/styles.css";
import { SuperAdminPanelCategoryRegister } from "../sa_panel_category_register/sa_panel_category_register";
import { SuperAdminPanelCategoryList } from "../sa_panel_category_list/sa_panel_category_list";

// Interface for component props
interface props {
  isWindowActive: boolean;
  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
}

// Main component for the Super Admin Panel Category Screen
export const SuperAdminPanelCategoryScreen = ({isWindowActive,setIsWindowActive}: props) => {
  // State to track the render count for force re-rendering the list
  const [renderCount, setRenderCount] = useState(0);
  // State to track if the register window is open
  const [isRegisterWindowOpen, setIsRegisterWindowOpen] = useState(false);

  // Function to handle closing the windows
  const handleClickToClose = () => {
    setIsWindowActive(false);
    setIsRegisterWindowOpen(false);
  }

  // Function to force re-render the category list
  const forceRenderList = () => {
    setRenderCount(prevCount => prevCount + 1);
  }

  return (
    <div className="panel_category_content">
      <div className="panel_category_header">
        Administrar Categorías
        <button className="category_add_btn"
          disabled={isWindowActive}
          onClick={() => {
            setIsWindowActive(true);
            setIsRegisterWindowOpen(true);
          }}
        >
          Registrar nueva categoría
        </button>
      </div>
      <div className="panel_category_body">
        {
          // Conditionally render the register window component
          isRegisterWindowOpen && <SuperAdminPanelCategoryRegister 
          handleClickToClose={handleClickToClose}
            forceRenderList={forceRenderList}
            />
        }
        {/* Render the category list component, with a key to force re-render */}
        <SuperAdminPanelCategoryList key={renderCount} setIsWindowActive={setIsWindowActive} isWindowActive={isWindowActive}/>
      </div>
    </div>
  );
}