import React from "react";

import { TableBody } from "@mui/material";

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 from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { useRouter } from "../../../../contexts/RouterContext";
import { LimitOffset, PageComponent } from "../../../../types";
import { PriceListRow } from "../../components/PriceListRow";
import { SHOW_PRICE_RULES } from "../../flags";
import { PriceList } from "../../types/price_list";

const PriceListPage: PageComponent<LimitOffset<PriceList>> = ({ data }) => {
  const { t } = useI18n();
  const { navigate } = useRouter();

  return (
    <Page>
      <Header>
        <TitleBar title={t("Price Lists")}>
          <SearchBar
            defaultValue={new URLSearchParams(window.location.search).get("search") ?? ""}
            placeholder={t("Search price lists")}
            onSubmit={(input) => {
              if (input === "") {
                navigate("pricing.price_list:list", {
                  replace: true,
                });
              } else {
                navigate("pricing.price_list:list", {
                  query: {
                    search: input,
                  },
                  replace: true,
                });
              }
            }}
          />
        </TitleBar>
      </Header>

      <Content layout="fullWidth">
        <TableCard>
          <Table pagination count={data?.count}>
            <TableHead>
              <TableHeading>{t("Name")}</TableHeading>
              <TableHeading>{t("Site")}</TableHeading>
              <TableHeading>{t("Channel")}</TableHeading>
              <TableHeading>{t("Currency")}</TableHeading>
              {SHOW_PRICE_RULES && <TableHeading>{t("Price rule")}</TableHeading>}
              <TableHeading align="right">{t("Active")}</TableHeading>
            </TableHead>

            <TableBody>
              {data?.results.map((priceList) => (
                <PriceListRow key={priceList.id} priceList={priceList} />
              ))}
            </TableBody>
          </Table>
        </TableCard>
      </Content>
    </Page>
  );
};

export default PriceListPage;