import {
  ActionDivider,
  AddBtn,
  DetailLink,
  EditLink,
  LoadingData,
  Pagination,
  SearchForm,
  SortIconWithNone,
  TableActionGroup,
} from "@/components/common";
import { BasePage, Header } from "@/components/layout";
import { useEventsController } from "@/pages/events/useEventsController";
import { HandleError } from "@/pages/others";
import { settings } from "@/utils/settings";
import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { Table } from "react-bootstrap";

export const Events = () => {
  const {
    data,
    error,
    isLoading,
    search,
    changeSortByName,
    setPage,
    setSearchText,
  } = useEventsController();
  const [selectedId, setSelectedId] = useState();

  if (error) return <HandleError error={error} />;
  if (isLoading) return <LoadingData />;

  return (
    <BasePage>
      <Header title={__("Events", "yoyaku-manager")}>
        <AddBtn to="/add" />
      </Header>
      <SearchForm searchText={search.search} setSearchText={setSearchText} />

      <Table striped hover>
        <thead>
          <tr>
            <th width="10%">ID</th>
            <th width="90%" onClick={changeSortByName}>
              {__("Name", "yoyaku-manager")}
              <SortIconWithNone order={search?.order} />
            </th>
          </tr>
        </thead>
        <tbody>
          {data &&
            data.items.map((item) => (
              <tr
                key={item.id}
                onMouseEnter={() => setSelectedId(item.id)}
                onMouseLeave={() => setSelectedId(null)}
              >
                <td>{item.id}</td>
                <td>
                  {item.name}
                  <br />
                  <TableActionGroup isVisible={selectedId === item.id}>
                    <DetailLink id={item.id} />
                    {settings.canWrite() && <ActionDivider />}
                    <EditLink id={item.id} />
                  </TableActionGroup>
                </td>
              </tr>
            ))}
        </tbody>
      </Table>

      <Pagination
        currentPage={search.page}
        numPages={data.num_pages}
        setPage={setPage}
      />
    </BasePage>
  );
};