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 { ProductRow } from "../../components/ProductRow";
import { ProductList } from "../../types/product";

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

  return (
    <Page>
      <Header>
        <TitleBar title={t("Products")}>
          <SearchBar
            defaultValue={new URLSearchParams(window.location.search).get("q") ?? ""}
            placeholder={t("Search for product number or name")}
            onSubmit={(input) => {
              if (input === "") {
                navigate("pim.product:list", {
                  replace: true,
                });
              } else {
                navigate("pim.product:list", {
                  query: {
                    q: input,
                  },
                  replace: true,
                });
              }
            }}
          />
        </TitleBar>
      </Header>

      <ContentWrapperWithActionBar>
        <Content layout="fullWidth">
          <TableCard>
            <Table pagination count={data?.count}>
              <TableHead>
                <TableHeading sx={{ width: 80 }}>{t("Image")}</TableHeading>
                <TableHeading>{t("Name")}</TableHeading>
                <TableHeading>{t("Type")}</TableHeading>
                <TableHeading>{t("Product Number")}</TableHeading>
                <TableHeading align="right">{t("Active")}</TableHeading>
              </TableHead>

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

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

export default ProductListPage;