import React from "react";

import { TableBody, TableCell, TableHead, TableRow } from "@mui/material";

import Card from "../../../components/Card";
import CardHeader from "../../../components/Card/CardHeader";
import Table from "../../../components/Table";
import TableHeading from "../../../components/Table/TableHeading";
import { useI18n } from "../../../contexts/I18nContext";
import { ContribComponent } from "../../../types";
import { ArticleStock } from "../types/contrib";

const ArticleInventoryCard: ContribComponent<ArticleStock[]> = ({ data }) => {
  const { t } = useI18n();

  return (
    <Card>
      <CardHeader title="Inventory" />
      <Table count={data.length}>
        <TableHead>
          <TableRow>
            <TableHeading>{t("Warehouse")}</TableHeading>
            <TableHeading align="right">{t("On Hand")}</TableHeading>
            <TableHeading align="right">{t("Allocated")}</TableHeading>
            <TableHeading align="right">{t("Available")}</TableHeading>
          </TableRow>
        </TableHead>

        <TableBody
          sx={{ ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } }}
        >
          {data.length === 0 && (
            <TableRow>
              <TableCell align="center" colSpan={4} sx={{ color: "GrayText" }}>
                {t("No inventory")}
              </TableCell>
            </TableRow>
          )}

          {data
            .sort((a, b) => (a.warehouse_code < b.warehouse_code ? -1 : 1))
            .map((stock) => (
              <TableRow key={stock.warehouse_code} sx={{ height: 56 }}>
                <TableCell sx={{ py: 0 }}>{stock.warehouse_code}</TableCell>
                <TableCell align="right" sx={{ py: 0 }}>
                  {stock.quantity_on_hand}
                </TableCell>
                <TableCell align="right" sx={{ py: 0 }}>
                  {stock.allocated_quantity}
                </TableCell>
                <TableCell align="right" sx={{ py: 0 }}>
                  {stock.availability}
                </TableCell>
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </Card>
  );
};

export default ArticleInventoryCard;