import { Dispatch, SetStateAction, useState } from "react";
import "./assets/css/styles.css";
import { SuperadminPanelAdminRegister } from "../sa_panel_admin_register/sa_panel_admin_register";
import { State } from "../../../../data/datasource/api/entities/state";
import { SuperAdminPanelAdminList } from "../sa_panel_admin_list/sa_panel_admin_list";

// Define the props interface for the component
interface props {
  isWindowActive: boolean;
  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
  statesList: State[];
}

// Main component for the Superadmin Panel Admin Screen
export const SuperadminPanelAdminScreen = ({
  isWindowActive,
  setIsWindowActive,
  statesList,
}: props) => {
  // State to control the visibility of the register panel
  const [showRegisterPanel, setShowRegisterPanel] = useState(false);
  // State to force re-render the admin list
  const [renderCount, setRenderCount] = useState(0);

  // Function to handle closing the register panel and window
  const handleClickToClose = () => {
    setIsWindowActive(false);
    setShowRegisterPanel(false);
  };

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

  return (
    <div className="sa_panel_admin_content">
      <div className="admin_panel_header">
        Administrar administradores
        <button
          className="admin_add_btn"
          onClick={() => {
            setShowRegisterPanel(true);
            setIsWindowActive(true);
          }}
          disabled={isWindowActive}
        >
          Registrar Nuevo Admin
        </button>
      </div>
      <div className="sa_panel_admin_body">
        {showRegisterPanel && (
          <SuperadminPanelAdminRegister
            handleClickToClose={handleClickToClose}
            forceRenderList={forceRenderList}
            statesList={statesList}
          />
        )}
        <SuperAdminPanelAdminList
          key={renderCount}
          isWindowActive={isWindowActive}
          statesList={statesList}
        />
      </div>
    </div>
  );
};
