import React from "react";

import { BusinessCenterOutlined, PersonOutlineOutlined } from "@mui/icons-material";
import { Box, Stack } from "@mui/material";

import { TableCell } from "../../../components/Table/TableCell";
import { NavigatingTableRow } from "../../../components/Table/TableRow";
import { formatPurchaseNumber } from "../../../util/format_purchase_number";
import { formatCustomerName } from "../../../util/format_string";
import { getPurchaseItemTitle } from "../../../util/purchase_item_title";
import { PurchaseDetail } from "../types/purchase";

export interface PurchaseRowProps {
  purchase: PurchaseDetail;
}

export const PurchaseRow: React.FC<PurchaseRowProps> = ({ purchase }) => (
  <NavigatingTableRow
    route="pos.purchase:detail"
    routeParams={{ purchase_number: purchase.number }}
  >
    <TableCell>{formatPurchaseNumber(purchase.number)}</TableCell>
    <TableCell>{getPurchaseItemTitle(purchase.items)}</TableCell>
    <TableCell>
      <Stack alignItems="center" direction="row" spacing={1}>
        {purchase.company_name ? (
          <BusinessCenterOutlined fontSize="small" />
        ) : (
          <PersonOutlineOutlined fontSize="small" />
        )}
        <Box component="span">{formatCustomerName(purchase)}</Box>
      </Stack>
    </TableCell>
    <TableCell>{purchase.email}</TableCell>
    <TableCell align="right">{`${purchase.total_amount} ${purchase.currency}`}</TableCell>
    <TableCell>
      {purchase.date_confirmed
        ? new Date(purchase.date_confirmed).toLocaleString("sv-SE", {
            year: "numeric",
            month: "numeric",
            day: "numeric",
            hour: "numeric",
            minute: "numeric",
          })
        : "—"}
    </TableCell>
  </NavigatingTableRow>
);