import {LoadingData, Pagination, SearchForm, SortIcon,} from "@/components/common";
import {BasePage, Header} from "@/components/layout";
import {HandleError} from "@/pages/others";
import {useWorkersController} from "@/pages/workers/useWorkersController";
import {useState} from "@wordpress/element";
import {__} from "@wordpress/i18n";
import {Table} from "react-bootstrap";

/**
 * wpのユーザー一覧
 */
export const Workers = () => {
  const {
    data,
    error,
    isLoading,
    search,
    changeSortByName,
    setPage,
    setSearchText,
  } = useWorkersController();
  const [selectedId, setSelectedId] = useState();

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

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

      <Table striped hover>
        <thead>
          <tr>
            <th width="40%" onClick={changeSortByName}>
              {__("Display Name", "yoyaku-manager")}
              <SortIcon order={search.order} />
            </th>
            <th>{__("Email", "yoyaku-manager")}</th>
            <th>{__("Role", "yoyaku-manager")}</th>
          </tr>
        </thead>
        <tbody>
          {data.items.map((item) => (
            <tr
              key={item.id}
              onMouseEnter={() => setSelectedId(item.id)}
              onMouseLeave={() => setSelectedId(null)}
            >
              <td>{item.display_name}</td>
              <td>{item.user_email}</td>
              <td>{item.role}</td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Pagination
        currentPage={search.page}
        numPages={data.num_pages}
        setPage={setPage}
      />
    </BasePage>
  );
};