import { Dispatch, SetStateAction, useState } from "react";
import { Town } from "../../../data/datasource/api/entities/town";
import "./assets/css/styles.css";
import { faEdit, faLanguage } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LoadingScreen } from "../../components/loading_screen/loading_screen";
import { useAdminTownInfo } from "../../../domain/useCase/useAdminTownInfo";
import { SuperadminPanelTownRegister } from "../../superadmin/sa_panel_town/sa_panel_town_register/sa_panel_town_register";

// Define the props interface for the component
interface props {
  isWindowActive: boolean;
  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
  town: Town | undefined;
  updateTown: () => Promise<void>;
}

// Main component function
export const AdminTownInfo = ({
  updateTown,
  isWindowActive,
  setIsWindowActive,
  town,
}: props) => {
  // Destructure values from the custom hook
  const {
    isEnglish,
    isLoading,
    setIsEnglish,
    setIsLoading,
    renderCount,
    forceRenderList,
    statesList,
  } = useAdminTownInfo(updateTown);

  // State to manage the visibility of the town register window
  const [isTownRegisterWindowActive, setIsTownRegisterWindowActive] =
    useState(false);

  // Function to set the visibility of the windows
  const setWindowVisibility = (visibility: boolean) => {
    setIsTownRegisterWindowActive(visibility);
    setIsWindowActive(visibility);
  };

  // If no town is assigned, display a message
  if (!town) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        }}
      >
        No tienes un pueblo asignado
      </div>
    );
  }

  // Main render of the component
  return (
    <div className="town_info_root">
      {isTownRegisterWindowActive && (
        <SuperadminPanelTownRegister
          setWindowActive={setIsWindowActive}
          setActualWindowActive={setIsTownRegisterWindowActive}
          forceRenderList={forceRenderList}
          isRegister={false}
          form={town}
          statesList={statesList}
        />
      )}
      <div className="town_info_cnt" key={renderCount}>
        {isLoading && (
          <div
            style={{
              width: "100%",
              height: "100%",
              background: "#eaeaea",
              position: "fixed",
            }}
          >
            <LoadingScreen />
          </div>
        )}

        <div className="info_header">
          <p>{town?.name}</p>
        </div>
        <div className="info_body">
          <div className="town_image_cnt">
            <img
              src={town?.imageURL as string}
              onLoad={() => setIsLoading(false)}
              alt=""
            />
          </div>
          <div className="info_fields_cnt">
            <div className="buttons_cnt">
              <div className="lang_change_cnt">
                <label>{isEnglish ? "Inglés" : "Español"}</label>
                <FontAwesomeIcon
                  icon={faLanguage}
                  className="lang_change_btn"
                  onClick={() => {
                    if (!isWindowActive) {
                      setIsEnglish(!isEnglish);
                    }
                  }}
                />
              </div>
              <FontAwesomeIcon
                style={{ cursor: "pointer" }}
                icon={faEdit}
                className="edit_btn"
                onClick={() => {
                  if (!isWindowActive) {
                    setWindowVisibility(true);
                  }
                }}
              />
            </div>
            {isEnglish ? (
              <textarea
                id="0"
                className="town_desc_textarea"
                value={town?.descriptionEN}
                disabled={true}
              />
            ) : (
              <textarea
                id="1"
                className="town_desc_textarea"
                value={town?.descriptionES}
                disabled={true}
              />
            )}

            {town.state}
          </div>
        </div>
      </div>
    </div>
  );
};
