import React from "react";

import { TableCell } from "../../../components/Table/TableCell";
import { NavigatingTableRow } from "../../../components/Table/TableRow";
import { formatPurchaseName } from "../../../util/format_purchase_name";
import { formatPurchaseNumber } from "../../../util/format_purchase_number";
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>{formatPurchaseName(purchase)}</TableCell>
    <TableCell>{purchase.email}</TableCell>
    <TableCell>{purchase.phone}</TableCell>
    <TableCell>
      {new Date(purchase.date_confirmed).toLocaleString("sv-SE", {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "numeric",
      })}
    </TableCell>
  </NavigatingTableRow>
);