// react
import React from "react";
// application
import { IHero } from "~/admin/interfaces/hero";
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";

interface Props {
  heroes: IHero[];
  onEdit: (hero: IHero) => void;
  onDelete: (id: number) => void;
}

function HeroList({ heroes, onEdit, onDelete }: Props) {
  const { sortedData, sortConfig, handleSort } = useTableSort<IHero>(heroes);

  if (heroes.length === 0) {
    return (
      <div className="card">
        <div className="card-body text-center py-5">
          <i className="fas fa-box fa-3x text-muted mb-3" />
          <p className="text-muted">No hay hero registrados</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <SortableTableHeader
                  sortKey="heroID"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  ID
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="title"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  Título
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="subtitle"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  Subtítulo
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="imageUrl"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  Imagen
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="redirectUrl"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  URL de redirección
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="status"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IHero)}
                >
                  Estado
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((hero) => (
                <tr key={hero.heroID}>
                  <td>{hero.heroID}</td>
                  <td>{hero.title}</td>
                  <td>{hero.subtitle}</td>
                  <td>
                    {hero.imageUrl
                      ? hero.imageUrl.substring(0, 15) + "..."
                      : ""}
                  </td>
                  <td>
                    {hero.redirectUrl
                      ? hero.redirectUrl.substring(0, 15) + "..."
                      : ""}
                  </td>
                  <td>
                    {hero.status === 1 ? "Activo" : "Pausado"}
                  </td>
                  <td>
                    <button
                      className="btn btn-sm btn-primary mr-2"
                      onClick={() => onEdit(hero)}
                      disabled={!hero.heroID}
                    >
                      <i className="fas fa-edit" />
                    </button>
                    <button
                      className="btn btn-sm btn-danger"
                      onClick={() => hero.heroID && onDelete(hero.heroID)}
                    >
                      <i className="fas fa-trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default HeroList;