import React from "react";

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 TableHead from "../../../../components/Table/TableHead";
import TableHeading from "../../../../components/Table/TableHeading";
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 { ArticleRow } from "../../components/ArticleRow";
import { ArticleList } from "../../types/article";

const ArticleListPage: PageComponent<LimitOffset<ArticleList>> = ({ data }) => {
  const { navigate } = useRouter();
  const { user } = useUser();
  const { t } = useI18n();

  return (
    <Page>
      <Header>
        <TitleBar title={t("Articles")}>
          <SearchBar
            defaultValue={new URLSearchParams(window.location.search).get("search") ?? ""}
            placeholder={t("Search for code, name or variant…")}
            onSubmit={(input) => {
              if (input === "") {
                navigate("catalog.article:list", {
                  replace: true,
                });
              } else {
                navigate("catalog.article:list", {
                  query: {
                    search: input,
                  },
                  replace: true,
                });
              }
            }}
          />
        </TitleBar>
      </Header>

      <ContentWrapperWithActionBar>
        <Content layout="fullWidth">
          <TableCard>
            <Table pagination count={data?.count}>
              <TableHead>
                <TableHeading>{t("Name")}</TableHeading>
                <TableHeading>{t("Variant")}</TableHeading>
                <TableHeading>{t("Type")}</TableHeading>
                <TableHeading>{t("Article Number")}</TableHeading>
                <TableHeading align="right">{t("Active")}</TableHeading>
              </TableHead>

              <TableBody>
                {data?.results.map((article) => <ArticleRow key={article.id} article={article} />)}
              </TableBody>
            </Table>
          </TableCard>
        </Content>

        {hasPermission(user, "catalog.add_article") && (
          <ActionBar>
            <Button
              color="primary"
              variant="contained"
              onClick={() => navigate("catalog.article:create")}
            >
              {t("Create article")}
            </Button>
          </ActionBar>
        )}
      </ContentWrapperWithActionBar>
    </Page>
  );
};

export default ArticleListPage;