import React from 'react';

import { formatCurrency, formatDateAndTime } from '@/packages/shared/src/utils';
import { useTranslation } from 'react-i18next';

import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import { Table, TableBody, TableCell, TableRow } from '@kit/ui/shadcn/table';

import CartItemDelete from './cart-item-delete';
import MobileCartRow from './mobile-cart-row';
import { EnrichedCartItem } from './types';

const MobileCartServiceItems = ({
  item,
  currencyCode,
  isUnavailable,
  productColumnLabelKey,
  setEditingItem,
}: {
  item: EnrichedCartItem;
  currencyCode: string;
  isUnavailable?: boolean;
  productColumnLabelKey: string;
  setEditingItem: (item: EnrichedCartItem | null) => void;
}) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <Table className="border-separate rounded-lg border p-2">
      <TableBody>
        <MobileCartRow
          titleKey={productColumnLabelKey}
          value={item.product_title}
        />
        <MobileCartRow
          titleKey="cart:table.time"
          value={formatDateAndTime(item.reservation.startTime.toString())}
        />
        <MobileCartRow
          titleKey="cart:table.location"
          value={item.reservation.location?.address ?? '-'}
        />
        <MobileCartRow titleKey="cart:table.quantity" value={item.quantity} />
        <MobileCartRow
          titleKey="cart:table.price"
          value={formatCurrency({
            value: item.unit_price,
            currencyCode,
            locale: language,
          })}
        />
        <MobileCartRow
          titleKey="cart:table.total"
          value={
            item.total &&
            formatCurrency({
              value: item.total,
              currencyCode,
              locale: language,
            })
          }
        />
        <TableRow>
          <TableCell />
          <TableCell className="flex w-full items-center justify-end gap-4 p-0 pt-2">
            <CartItemDelete id={item.id} />
            <Button onClick={() => setEditingItem(item)}>
              <Trans i18nKey="common:change" />
            </Button>
          </TableCell>
        </TableRow>

        {isUnavailable && (
          <TableRow>
            <TableCell
              colSpan={8}
              className="text-destructive px-4 text-left sm:px-6"
            >
              <Trans i18nKey="booking:timeSlotUnavailable" />
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
};

export default MobileCartServiceItems;