import { Dispatch, SetStateAction, useState } from "react";
import { AdminPanelPoiRegister } from "../admin_panel_poi_register/admin_panel_poi_register";
import "./assets/css/styles.css";
import { AdminPanelPoiList } from "../admin_panel_poi_list/admin_panel_poi_list";
import { AdminPanelPoiViewer } from "../admin_panel_poi_viewer/admin_panel_poi_viewer";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
import { PointOfInterest } from "../../../../data/datasource/api/entities/poi";
import { Town } from "../../../../data/datasource/api/entities/town";

// Define the props interface
interface props {
  isWindowActive: boolean; // Indicates if any window (register/viewer) is active
  setIsWindowActive: Dispatch<SetStateAction<boolean>>; // Function to set the window active state
  town: Town | undefined; // The town object, can be undefined
}

// Define the main component
export const AdminPanelPoiScreen = ({
  isWindowActive,
  setIsWindowActive,
  town,
}: props) => {
  // State variables
  const [renderCount, setRenderCount] = useState(0); // Counter to force re-rendering the list
  const [isRegisterPane, setIsRegisterPane] = useState(true); // Toggle between register and update mode
  const [actualPoint, setActualPoint] = useState<PointOfInterest | undefined>(); // Currently selected POI
  const [isRegisterWindowActive, setIsRegisterWindowActive] = useState(false); // Register window visibility
  const [isViewerWindowActive, setIsViewerWindowActive] = useState(false); // Viewer window visibility
  const [isPDFViewerActive, setIsPDFViewerActive] = useState(false); // PDF viewer visibility
  const [binaryData, setBinaryData] = useState(""); // Binary data for PDF

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

  // Function to set the visibility of the register window
  const setWindowVisibilityRegister = (visibility: boolean) => {
    setIsRegisterWindowActive(visibility);
    setIsWindowActive(visibility);
  };

  // Function to set the visibility of the viewer window
  const setWindowVisibilityViewer = (visibility: boolean) => {
    setIsViewerWindowActive(visibility);
    setIsWindowActive(visibility);
  };

  return (
    <div className="admin_panel_poi_content">
      <div className="panel_poi_header">
        Administrar puntos de interés dentro de un lugar
        <button
          className="poi_add_btn"
          disabled={isWindowActive || !town}
          onClick={() => {
            setIsRegisterPane(true);
            setWindowVisibilityRegister(true);
          }}
        >
          Registrar punto
        </button>
      </div>
      <div className="panel_poi_body">
        {isRegisterWindowActive && (
          <AdminPanelPoiRegister
            idTown={town?.idTown || -1}
            setWindowVisibility={setWindowVisibilityRegister}
            forceRenderList={forceRenderList}
            isRegister={isRegisterPane}
            form={actualPoint}
          />
        )}
        {isViewerWindowActive && (
          <AdminPanelPoiViewer
            pointId={actualPoint?.idPoint || -1}
            setWindowVisibility={setWindowVisibilityViewer}
          />
        )}
        <AdminPanelPoiList
          idTown={town?.idTown || -1}
          key={renderCount}
          setActualPoint={setActualPoint}
          setWindowVisibilityViewer={setWindowVisibilityViewer}
          isWindowActive={isWindowActive}
          setBinaryData={setBinaryData}
          setIsPDFViewerActive={setIsPDFViewerActive}
        />
        {isPDFViewerActive && (
          <div className="pdf_viewer">
            <div className="pdf_viewer_header">
              <FontAwesomeIcon
                icon={faWindowClose}
                className="close_btn"
                onClick={() => {
                  setIsPDFViewerActive(false);
                  setBinaryData("");
                }}
              />
            </div>
            <div className="pdf_viewer_body">
              <iframe
                src={"data:application/pdf;base64," + binaryData}
                height="100%"
                width="100%"
                title="PDF Viewer"
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
