'use client';

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

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

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

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

  return (
    <>
      <TableRow className="w-full" data-testid="product-row">
        <TableCell className="w-[100%] px-4 text-left sm:px-6">
          <p
            className="txt-medium-plus text-ui-fg-base"
            data-testid="product-title"
          >
            {item.product_title}
          </p>
        </TableCell>

        <TableCell className="px-4 sm:px-6">
          {formatDateAndTime(item.reservation.startTime.toString())}
        </TableCell>

        <TableCell className="px-4 sm:px-6">
          {item.reservation.location?.address ?? '-'}
        </TableCell>

        <TableCell className="px-4 sm:px-6">{item.quantity}</TableCell>

        <TableCell className="min-w-[80px] px-4 sm:px-6">
          {formatCurrency({
            value: item.unit_price,
            currencyCode,
            locale: language,
          })}
        </TableCell>

        <TableCell className="min-w-[80px] px-4 text-right sm:px-6">
          {item.total &&
            formatCurrency({
              value: item.total,
              currencyCode,
              locale: language,
            })}
        </TableCell>

        <TableCell className="px-4 text-right sm:px-6">
          <span className="flex justify-end gap-x-1">
            <Button size="sm" onClick={() => setEditingItem(item)}>
              <Trans i18nKey="common:change" />
            </Button>
          </span>
        </TableCell>

        <TableCell className="px-4 text-right sm:px-6">
          <span className="flex w-[60px] justify-end gap-x-1">
            <CartItemDelete id={item.id} />
          </span>
        </TableCell>
      </TableRow>
      {isUnavailable && (
        <TableRow>
          <TableCell
            colSpan={8}
            className="text-destructive px-4 text-left sm:px-6"
          >
            <Trans i18nKey="booking:timeSlotUnavailable" />
          </TableCell>
        </TableRow>
      )}
    </>
  );
}