import React from "react";

import { Chip, TableBody, Typography } from "@mui/material";

import Card from "../../../components/Card";
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 Content from "../../../containers/Content";
import { useI18n } from "../../../contexts/I18nContext";
import { ContribComponent, LimitOffset } from "../../../types";
import { formatPurchaseNumber } from "../../../util/format_purchase_number";
import { getPurchaseItemTitle } from "../../../util/purchase_item_title";
import { Purchase } from "../types/purchase";

const PurchasesCard: ContribComponent<LimitOffset<Purchase>> = ({
  data: { next: _next, previous: _previous, results },
}) => {
  const { t } = useI18n();
  const compactRightCellSx = { width: 1, whiteSpace: "nowrap" };

  return (
    <Content layout="fullWidth">
      {results.length === 0 ? (
        <Typography align="center" color="text.disabled" fontSize="italic" m="0 auto">
          {t("No purchases yet.")}
        </Typography>
      ) : null}

      {results.length > 0 && (
        <Card>
          <Table pagination count={results.length}>
            <TableHead>
              <TableHeading width={40}>{t("#")}</TableHeading>
              <TableHeading>{t("Items")}</TableHeading>
              <TableHeading align="right" sx={compactRightCellSx}>
                {t("Total")}
              </TableHeading>
              <TableHeading align="right" sx={compactRightCellSx}>
                {t("Date")}
              </TableHeading>
            </TableHead>

            <TableBody>
              {results.map((purchase) => (
                <NavigatingTableRow
                  key={purchase.number}
                  route="pos.purchase:detail"
                  routeParams={{ purchase_number: purchase.number }}
                >
                  <TableCell>{formatPurchaseNumber(purchase.number)}</TableCell>
                  <TableCell>{getPurchaseItemTitle(purchase.items)}</TableCell>
                  <TableCell align="right" sx={compactRightCellSx}>
                    {`${purchase.total_amount} ${purchase.currency}`}
                  </TableCell>
                  <TableCell align="right" sx={compactRightCellSx}>
                    {!purchase.date_confirmed && (
                      <>
                        <Chip
                          color="warning"
                          label={t("Unconfirmed")}
                          size="small"
                          sx={{ ml: 1 }}
                        />{" "}
                      </>
                    )}
                    {new Date(purchase.date_confirmed ?? purchase.date_created).toLocaleString(
                      "sv-SE",
                      {
                        year: "numeric",
                        month: "numeric",
                        day: "numeric",
                        hour: "numeric",
                        minute: "numeric",
                      },
                    )}
                  </TableCell>
                </NavigatingTableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      )}
    </Content>
  );
};
export default PurchasesCard;