import { Menu, MenuItem, Sidebar } from "react-pro-sidebar";
import "./assets/styles/style.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faLocation,
  faMonument,
  faPlaceOfWorship,
} from "@fortawesome/free-solid-svg-icons";
import { AdminPanelNavBar } from "../admin_panel_navbar/admin_navbar";
import { SidebarHeader } from "../../components/sidebar_header/sidebar_header";
import { AdminPanelPlaceScreen } from "../admin_panel_places/admin_panel_place_screen/admin_panel_place_screen";
import { AdminSelectedPanel } from "../../../core/constants/selected_panel";
import { useAdminHomePage } from "../../../domain/useCase/useAdminHomePage";
import { LoadingScreen } from "../../components/loading_screen/loading_screen";
import { ErrorWindow } from "../../components/error_window/error_window";
import { LoadingSpinner } from "../../components/loading_spinner/loading_spinner";
import { AdminTownInfo } from "../admin_town_info/admin_town_info";
import { Footer } from "../../components/footer/footer";
import { AdminPanelPoiScreen } from "../admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen";

// Main component for the admin home page
export const AdminHomePage = () => {
  // Destructure state and functions from the custom hook
  const {
    collapsed,
    isWindowActive,
    setCollapsed,
    selectedPanel,
    setSelectedPanel,
    setIsWindowActive,
    isLoading,
    error,
    errorMessage,
    town,
    updateTown,
  } = useAdminHomePage();

  // Show loading screen if data is being loaded
  if (isLoading) return <LoadingScreen />;

  // Show error window if there is an error
  if (error)
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100vw",
          height: "100vh",
        }}
      >
        <LoadingSpinner />
        Redirigiendo...
        <ErrorWindow message={errorMessage} />
      </div>
    );

  return (
    <div className="admin-panel-root">
      {/* Sidebar for navigation */}
      <Sidebar
        className="sidebar"
        collapsed={collapsed}
        onMouseOver={() => {
          isWindowActive ? setCollapsed(true) : setCollapsed(false);
        }}
        onMouseOut={() => setCollapsed(true)}
      >
        <SidebarHeader />
        <Menu>
          <MenuItem
            icon={<FontAwesomeIcon icon={faMonument} />}
            onClick={() => setSelectedPanel(AdminSelectedPanel.TOWN_INFO)}
            disabled={isWindowActive}
          >
            Información del pueblo
          </MenuItem>
          <MenuItem
            icon={<FontAwesomeIcon icon={faPlaceOfWorship} />}
            disabled={isWindowActive}
            onClick={() => {
              setSelectedPanel(AdminSelectedPanel.PLACES);
            }}
          >
            Lugares
          </MenuItem>
          <MenuItem
            icon={<FontAwesomeIcon icon={faLocation} />}
            disabled={isWindowActive}
            onClick={() => {
              setSelectedPanel(AdminSelectedPanel.POINT_OF_INTEREST);
            }}
          >
            Puntos de interés
          </MenuItem>
        </Menu>
      </Sidebar>
      <div className="admin-panel-body">
        {/* Navigation bar */}
        <AdminPanelNavBar
          isWindowActive={isWindowActive}
          setIsWindowActive={setIsWindowActive}
        />
        <div className="admin-panel-content">
          {/* Render content based on the selected panel */}
          {(() => {
            switch (selectedPanel) {
              case AdminSelectedPanel.TOWN_INFO:
                return (
                  <AdminTownInfo
                    updateTown={updateTown}
                    setIsWindowActive={setIsWindowActive}
                    isWindowActive={isWindowActive}
                    town={town}
                  />
                );
              case AdminSelectedPanel.PLACES:
                return (
                  <AdminPanelPlaceScreen
                    setIsWindowActive={setIsWindowActive}
                    isWindowActive={isWindowActive}
                    town={town}
                  />
                );
              case AdminSelectedPanel.POINT_OF_INTEREST:
                return (
                  <AdminPanelPoiScreen
                    setIsWindowActive={setIsWindowActive}
                    isWindowActive={isWindowActive}
                    town={town}
                  />
                );
              default:
                return null;
            }
          })()}
        </div>
        {/* Footer */}
        <div className="footer-cnt">
          <Footer />
        </div>
      </div>
    </div>
  );
};
