import { useState } from 'react';

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

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@kit/ui/shadcn/dialog';
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from '@kit/ui/table';
import { Trans } from '@kit/ui/trans';

import BookingContainer from '../booking/booking-container';
import CartServiceItem from './cart-service-item';
import MobileCartServiceItems from './mobile-cart-service-items';
import { EnrichedCartItem } from './types';

const EditCartServiceItemModal = ({
  item,
  onComplete,
}: {
  item: EnrichedCartItem | null;
  onComplete: () => void;
}) => {
  if (!item) return null;

  return (
    <Dialog defaultOpen>
      <DialogContent className="xs:max-w-[90vw] flex max-h-screen max-w-full flex-col items-center gap-4 space-y-4 overflow-y-scroll">
        <DialogHeader className="items-center text-center">
          <DialogTitle>
            <Trans i18nKey="cart:editServiceItem.title" />
          </DialogTitle>
          <DialogDescription>
            <Trans i18nKey="cart:editServiceItem.description" />
          </DialogDescription>
        </DialogHeader>
        <div>
          {item.product && item.reservation.countryCode ? (
            <BookingContainer
              category={{
                products: [item.product],
                countryCode: item.reservation.countryCode,
              }}
              cartItem={item}
              onComplete={onComplete}
            />
          ) : (
            <p>
              <Trans i18nKey="booking:noProducts" />
            </p>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};

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

  return (
    <>
      <Table className="hidden border-separate rounded-lg border sm:block">
        <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)}
                setEditingItem={setEditingItem}
              />
            ))}
        </TableBody>
      </Table>
      <div className="sm:hidden">
        {items
          .sort((a, b) =>
            (a.created_at ?? '') > (b.created_at ?? '') ? -1 : 1,
          )
          .map((item) => (
            <MobileCartServiceItems
              key={item.id}
              item={item}
              currencyCode={cart.currency_code}
              isUnavailable={unavailableLineItemIds?.includes(item.id)}
              productColumnLabelKey={productColumnLabelKey}
              setEditingItem={setEditingItem}
            />
          ))}
      </div>

      <EditCartServiceItemModal
        item={editingItem}
        onComplete={() => setEditingItem(null)}
      />
    </>
  );
}