// Import necessary modules and components
import DataTable, { TableColumn } from "react-data-table-component";
import { usePlace } from "../../../../domain/useCase/usePlace";
import "./assets/css/styles.css";
import { Place } from "../../../../data/datasource/api/entities/place";
import { LoadingSpinner } from "../../../components/loading_spinner/loading_spinner";
import { faEdit } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Dispatch, SetStateAction, useEffect } from "react";

// Define the props interface for the component
interface props {
  idTown: number;
  isWindowActive: boolean;
  setWindowVisibility: (visibility: boolean) => void;
  setActualPlace: Dispatch<SetStateAction<Place | undefined>>;
  setIsRegisterPane: Dispatch<SetStateAction<boolean>>;
}

// Define the AdminPanelPlaceList component
export const AdminPanelPlaceList = ({
  idTown,
  isWindowActive,
  setWindowVisibility,
  setActualPlace,
  setIsRegisterPane,
}: props) => {
  // Use the custom hook to fetch place data
  const { placeList, pending, updatePlacesByTown } = usePlace();

  // Handle the edit action for a selected place
  const handleEditSelectedCategory = (place: Place) => {
    setIsRegisterPane(false);
    setActualPlace(place);
    setWindowVisibility(true);
  };

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

  // Define the columns for the data table
  const columns: TableColumn<Place>[] = [
    {
      name: "Identificador",
      selector: (row) => row.idPlace || 0,
    },
    {
      name: "Nombre",
      selector: (row) => row.name,
      sortable: true,
    },
    {
      name: "Estado",
      selector: (row) => row.available,
    },
    {
      name: "Acciones",
      cell: (row) => {
        return (
          <FontAwesomeIcon
            style={isWindowActive ? { color: "gray" } : { cursor: "pointer" }}
            icon={faEdit}
            onClick={() => {
              if (!isWindowActive) {
                handleEditSelectedCategory(row);
              }
            }}
          />
        );
      },
    },
  ];

  // Render the data table with the fetched places
  return (
    <div className="place_list_cnt">
      <DataTable
        noDataComponent="No hay lugares que mostrar"
        progressPending={pending}
        progressComponent={<LoadingSpinner style={{ display: "flex" }} />}
        columns={columns}
        data={placeList}
        className="data_table"
      />
    </div>
  );
};
