import React, { useState } from "react";

import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import { Button, TableBody } from "@mui/material";

import ActionBar from "../../../../components/ActionBar";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import SearchBar from "../../../../components/SearchBar";
import { Table } from "../../../../components/Table";
import { TableCell } from "../../../../components/Table/TableCell";
import TableHead from "../../../../components/Table/TableHead";
import TableHeading from "../../../../components/Table/TableHeading";
import { NavigatingTableRow } from "../../../../components/Table/TableRow";
import TableCard from "../../../../components/TableCard";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { ContentWrapperWithActionBar } from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { useRouter } from "../../../../contexts/RouterContext";
import { useUser } from "../../../../contexts/UserContext";
import { LimitOffset, PageComponent } from "../../../../types";
import { hasPermission } from "../../../../util/has_permission";
import InviteUserModal from "../../components/InviteUserModal";
import { StaffList } from "../../types/staff";

const StaffListPage: PageComponent<LimitOffset<StaffList>> = ({ data, refresh }) => {
  const { t } = useI18n();
  const { navigate } = useRouter();
  const { user } = useUser();
  const [inviteModalOpen, setInviteModalOpen] = useState(false);

  return (
    <Page>
      <Header>
        <TitleBar title="Staff">
          <SearchBar
            defaultValue={new URLSearchParams(window.location.search).get("search") ?? ""}
            placeholder={t("Search users…")}
            onSubmit={(input) => {
              if (input === "") {
                navigate("user.staff:list", {
                  replace: true,
                });
              } else {
                navigate("user.staff:list", {
                  query: {
                    search: input,
                  },
                  replace: true,
                });
              }
            }}
          />
        </TitleBar>
      </Header>

      <ContentWrapperWithActionBar>
        <Content layout="fullWidth">
          <TableCard>
            <Table pagination count={data?.count}>
              <TableHead>
                <TableHeading>{t("Email")}</TableHeading>
                <TableHeading>{t("Permissions")}</TableHeading>
                <TableHeading>{t("Active")}</TableHeading>
              </TableHead>

              <TableBody>
                {data?.results.map((user) => (
                  <NavigatingTableRow
                    key={user.id}
                    route="user.staff:detail"
                    routeParams={{ id: user.id }}
                  >
                    <TableCell>{user.email}</TableCell>
                    <TableCell>{user.groups.join(", ")}</TableCell>
                    <TableCell>
                      {user.is_active ? <CheckCircleIcon color="success" fontSize="small" /> : null}
                    </TableCell>
                  </NavigatingTableRow>
                ))}
              </TableBody>
            </Table>
          </TableCard>
        </Content>

        {hasPermission(user, "user.add_user") && (
          <ActionBar>
            <Button color="primary" variant="contained" onClick={() => setInviteModalOpen(true)}>
              {t("Invite")}
            </Button>
          </ActionBar>
        )}
      </ContentWrapperWithActionBar>

      <InviteUserModal open={inviteModalOpen} refresh={refresh} setOpen={setInviteModalOpen} />
    </Page>
  );
};

export default StaffListPage;