import * as React from 'react';
import { useOrderSummaryQuery } from 'typings/graphql';

import { formatPrice } from 'utils/helpers';

import Table from 'components/table/Table';
import TableBody from 'components/table/TableBody';
import TableCell from 'components/table/TableCell';
import TableRow from 'components/table/TableRow';
import TableHead from 'components/table/TableHead';

interface IOrderSummaryProps {
  orderId: string;
}

const OrderSummary = ({ orderId }: IOrderSummaryProps) => {
  if (!orderId) return null;
  const { data } = useOrderSummaryQuery({
    variables: { input: { orderId } },
  });

  return (
    <Table>
      <TableHead>
        <TableCell>
          Vara (magn)
        </TableCell>
        <TableCell>
          Símanúmer
        </TableCell>
        <TableCell>
          Lýsing
        </TableCell>
        <TableCell>
          Verð
        </TableCell>
      </TableHead>
      <TableBody>
        {data?.order?.items?.map(({
          variantId,
          name,
          price,
          customAttributes,
          description,
          quantity,
        }) => (
          <TableRow key={variantId}>
            <TableCell>
              {name} x {quantity}
            </TableCell>
            <TableCell>
              {customAttributes?.msisdn}
            </TableCell>
            <TableCell>
              {description}
            </TableCell>
            <TableCell>
              {formatPrice(price)}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default OrderSummary;