import { useEffect, useState } from "react";
import { Table, Button } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import StaffModal from "../../components/StaffModal";
import EditSports from "../../components/forms/EditSports";
import { deleteSportInApi, getSportsFromApi } from "../../api/sport";
import { Sport } from "../../types";

function Sports() {
  const { t } = useTranslation();
  const [editElement, setEditElement] = useState<Sport | null>(null);
  const [deleteElement, setDeleteElement] = useState<Sport | null>(null);
  const [addElement, setAddElement] = useState<boolean>(false);
  const [sports, setSports] = useState<Sport[]>([]);

  async function getSports() {
    const sports = await getSportsFromApi();
    setSports(sports.result);
  }

  async function deleteSport() {
    if (!deleteElement) return;
    const response = await deleteSportInApi({ id: deleteElement.id });
    await getSports();
    setDeleteElement(null);
  }

  useEffect(() => {
    getSports();
  }, []);

  return (
    <div className="m-1 h-100">
      <Table responsive striped bordered hover>
        <thead>
          <tr>
            <th>{t("sports.Id")}</th>
            <th>{t("sports.Name")}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {sports.map((x) => (
            <tr key={x.id}>
              <td>{x.id}</td>
              <td>{x.name}</td>
              <td>
                <div className="d-flex">
                  <div
                    className="mx-2"
                    onClick={() => {
                      setEditElement(x);
                    }}
                  >
                    <FontAwesomeIcon
                      icon={faEdit}
                      className="text-secondary clickableIcon"
                      size="1x"
                    />
                  </div>
                  <div
                    className="mx-2"
                    onClick={() => {
                      setDeleteElement(x);
                    }}
                  >
                    <FontAwesomeIcon
                      icon={faTrashAlt}
                      className="text-danger clickableIcon"
                      size="1x"
                    />
                  </div>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <div
        className="d-flex px-2 py-1 justify-content-end bg-white border-top"
        style={{ position: "sticky", right: "5px", bottom: "0", zIndex: 3 }}
      >
        <Button
          onClick={() => {
            setAddElement(true);
          }}
          variant="secondary"
        >
          <FontAwesomeIcon icon={faPlus} className="text-white me-2" />
          {t("sports.AddSport")}
        </Button>
      </div>
      <StaffModal header={t("sports.AddSport")} show={addElement}>
        <EditSports
          onSubmit={async () => {
            setAddElement(false);
            await getSports();
          }}
        ></EditSports>
      </StaffModal>
      <StaffModal header={t("sports.EditSport")} show={!!editElement}>
        <EditSports
          id={editElement?.id}
          name={editElement?.name}
          onSubmit={async () => {
            setEditElement(null);
            await getSports();
          }}
        ></EditSports>
      </StaffModal>
      <StaffModal
        header={t("sports.DeleteSport")}
        hideColor="secondary"
        successText={t("sports.Delete")}
        successColor="danger"
        show={!!deleteElement}
        onSuccess={deleteSport}
      >
        <span>
          {t("sports.messages.DeleteText", { val: deleteElement?.name })}
        </span>
      </StaffModal>
    </div>
  );
}

export default Sports;