import React from "react";

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

import { DateTime } from "luxon";

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 { Purchase } from "../types/purchase";

const PurchasesCard: ContribComponent<LimitOffset<Purchase>> = ({
  data: { next: _next, previous: _previous, results },
}) => {
  const { t } = useI18n();

  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("Name")}</TableHeading>
              <TableHeading>{t("Email")}</TableHeading>
              <TableHeading>{t("Phone")}</TableHeading>
              <TableHeading>{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>
                    {purchase.given_name ? `${purchase.given_name} ${purchase.family_name}` : "—"}
                  </TableCell>
                  <TableCell>{purchase.email}</TableCell>
                  <TableCell>{purchase.phone}</TableCell>
                  <TableCell>
                    {DateTime.fromISO(purchase.date_confirmed).toFormat("yyyy-MM-dd, HH:mm")}
                  </TableCell>
                </NavigatingTableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      )}
    </Content>
  );
};
export default PurchasesCard;