import { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
import "./assets/css/styles.css";
import { languaguesList } from "../../../../core/constants/languages";
import { PointOfInterest } from "../../../../data/datasource/api/entities/poi";
import { usePlace } from "../../../../domain/useCase/usePlace";
import { usePointOfInterest } from "../../../../domain/useCase/usePointOfInterest";
import { LoadingScreen } from "../../../components/loading_screen/loading_screen";

// Define the props interface
interface props {
  pointId: number; // ID of the point of interest to fetch
  setWindowVisibility: (visibility: boolean) => void; // Function to control the visibility of the window
}

// Define the AdminPanelPoiViewer component
export const AdminPanelPoiViewer = ({
  pointId,
  setWindowVisibility,
}: props) => {
  // State variables
  const [point, setPoint] = useState<PointOfInterest | null>(null); // Stores the point of interest data
  const [isLoading, setIsLoading] = useState(false); // Loading state
  const [
    languageDescriptionIndexSelected,
    setLanguageDescriptionIndexSelected,
  ] = useState(0); // Selected language index for descriptions
  const [languageDirectionsIndexSelected, setLanguageDirectionsIndexSelected] =
    useState(0); // Selected language index for directions
  const [descriptions, setDescriptions] = useState<string[]>(
    new Array(languaguesList.length).fill("")
  ); // Descriptions in different languages
  const [directions, setDirections] = useState<string[]>(
    new Array(languaguesList.length).fill("")
  ); // Directions in different languages
  const [placeName, setPlaceName] = useState(""); // Name of the place

  // Hooks to fetch data
  const { getPointById } = usePointOfInterest();
  const { getPlaceById } = usePlace();

  // Fetch data when component mounts
  useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Function to fetch data from the API
  const fetchData = async () => {
    setIsLoading(true);
    const result = await getPointById(pointId);
    if (result) {
      setPoint(result);
      const newDescriptions = descriptions.map((element, index) => {
        if (index === 0) {
          return result.contentES;
        } else if (index === 1) {
          return result.contentEN;
        } else {
          return element;
        }
      });
      setDescriptions(newDescriptions);

      const newDirections = directions.map((element, index) => {
        if (index === 0) {
          return result.directionsES;
        } else if (index === 1) {
          return result.directionsEN;
        } else {
          return element;
        }
      });
      setDirections(newDirections);

      const place = await getPlaceById(result.idPlace);
      if (place) {
        setPlaceName(place.name);
      }
    }
    setIsLoading(false);
  };

  return (
    <div className="poi_viewer_wrap">
      <div className="poi_viewer_header">
        Información del punto de interés
        <FontAwesomeIcon
          icon={faWindowClose}
          className="close_btn"
          onClick={() => setWindowVisibility(false)}
        />
      </div>
      {isLoading || point === null ? (
        <LoadingScreen />
      ) : (
        <div className="poi_viewer_body">
          <div className="inputs_container">
            <div className="input">
              <div className="input_header">Nombre del punto de interés</div>
              <input type="text" disabled readOnly defaultValue={point.name} />
            </div>
            <div className="input">
              <div className="input_header">
                Descripción del punto de interés
                <select
                  name="language_description_select"
                  onChange={(e) =>
                    setLanguageDescriptionIndexSelected(Number(e.target.value))
                  }
                >
                  {languaguesList.map((language, index) => {
                    return (
                      <option key={index} value={index}>
                        {language}
                      </option>
                    );
                  })}
                </select>
              </div>
              {languaguesList.map((language, index) => {
                if (index === languageDescriptionIndexSelected) {
                  return (
                    <textarea
                      id={index.toString()}
                      className="poi_description"
                      defaultValue={descriptions[index]}
                      disabled
                      readOnly
                      key={language}
                    />
                  );
                }
                return null;
              })}
            </div>

            <div className="input">
              <div className="input_header">
                Direcciones hacia el siguiente punto de interés
                <select
                  name="language_description_select"
                  onChange={(e) =>
                    setLanguageDirectionsIndexSelected(Number(e.target.value))
                  }
                >
                  {languaguesList.map((language, index) => {
                    return (
                      <option key={index} value={index}>
                        {language}
                      </option>
                    );
                  })}
                </select>
              </div>
              {languaguesList.map((language, index) => {
                if (index === languageDirectionsIndexSelected) {
                  return (
                    <textarea
                      id={index.toString()}
                      className="poi_description"
                      defaultValue={directions[index]}
                      readOnly
                      disabled
                      key={language}
                    />
                  );
                }
                return null;
              })}
            </div>

            <div className="input">
              <div className="input_header">
                Nombre del lugar al que pertenece el punto de interés
              </div>
              <input type="text" disabled readOnly defaultValue={placeName} />
            </div>
          </div>
          <div className="image_cnt">
            <div className="input_header">Nombre del punto de interés</div>
            <div className="image">
              <img src={point.image as string} alt={point.name} />
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
