import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"
import './assets/styles/style.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMonument, faSignOut, faUser, faUserTie } from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import { useAuth } from "../../../context/auth_context";
import { Link } from "react-router-dom";
import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";
import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
import { SuperadminPanelTownScreen } from "../../../components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen";
import { SuperadminPanelAdminScreen } from "../../../components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen";

export const SuperAdminHomePage = () => {
  const [collapsed, setCollapsed] = useState(true);
  const [townPanel, setTownPanel] = useState(true);

  return (
    <div className="superdmin-panel-root">
      <Sidebar className="sidebar" collapsed={collapsed} 
        onMouseOver={() => setCollapsed(false)}
        onMouseOut={() => setCollapsed(true)}>
        <SidebarHeader/>
        <Menu>
          <MenuItem icon={<FontAwesomeIcon icon={faMonument}/>}  onClick={() => setTownPanel(true)}>
            Pueblos
          </MenuItem>

          <MenuItem icon={<FontAwesomeIcon icon={faUserTie}/>} onClick={() => setTownPanel(false)}>
            Administradores
          </MenuItem>
        </Menu>
      </Sidebar>
      <div className="superadmin-panel-body">
        <AdminPanelNavBar/>
        <div className="superadmin-panel-content">
          {townPanel ? <SuperadminPanelTownScreen /> : <SuperadminPanelAdminScreen />}
        </div>
      </div>
    </div>
  )
}