import { StoreCart } from '@medusajs/types';

import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from '@kit/ui/table';
import { Trans } from '@kit/ui/trans';

import CartServiceItem from './cart-service-item';
import { EnrichedCartItem } from './types';

export default function CartServiceItems({
  cart,
  items,
  productColumnLabelKey,
  unavailableLineItemIds
}: {
  cart: StoreCart;
  items: EnrichedCartItem[];
  productColumnLabelKey: string;
  unavailableLineItemIds?: string[]
}) {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <Table className="border-separate rounded-lg border">
      <TableHeader className="text-ui-fg-subtle txt-medium-plus">
        <TableRow>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey={productColumnLabelKey} />
          </TableHead>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey="cart:table.time" />
          </TableHead>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey="cart:table.location" />
          </TableHead>
          <TableHead className="px-4 sm:px-6">
            <Trans i18nKey="cart:table.quantity" />
          </TableHead>
          <TableHead className="min-w-[100px] px-4 sm:px-6">
            <Trans i18nKey="cart:table.price" />
          </TableHead>
          <TableHead className="min-w-[100px] px-4 text-right sm:px-6">
            <Trans i18nKey="cart:table.total" />
          </TableHead>
          <TableHead className="px-4 sm:px-6"></TableHead>
          <TableHead className="px-4 sm:px-6"></TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {items
          .sort((a, b) =>
            (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
          )
          .map((item) => (
            <CartServiceItem
              key={item.id}
              item={item}
              currencyCode={cart.currency_code}
              isUnavailable={unavailableLineItemIds?.includes(item.id)}
            />
          ))}
      </TableBody>
    </Table>
  );
}