'use client';

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

import { Trans } from '@kit/ui/trans';

import { EnrichedCartItem } from '../cart/types';
import BookingCalendar from './booking-calendar';
import { BookingProvider } from './booking.provider';
import LocationSelector from './location-selector';
import ServiceSelector from './service-selector';
import TimeSlots from './time-slots';

const BookingContainer = ({
  category,
  cartItem,
  onComplete,
}: {
  category: { products: StoreProduct[]; countryCode: string };
  cartItem?: EnrichedCartItem;
  onComplete?: () => void;
}) => {
  const products = cartItem?.product ? [cartItem.product] : category.products;

  if (!cartItem || !products?.length) {
    <p>
      <Trans i18nKey="booking:noProducts" />
    </p>;
  }

  return (
    <BookingProvider category={{ products }} service={cartItem?.product}>
      <div className="xs:flex-row flex max-h-full flex-col gap-6">
        <div className="flex flex-col">
          <ServiceSelector
            products={products.filter((product) => {
              if (product.metadata?.serviceIds) {
                return Array.isArray(
                  JSON.parse(product.metadata.serviceIds as string),
                );
              }
              return false;
            })}
          />
          <BookingCalendar />
          <LocationSelector />
        </div>
        <TimeSlots
          countryCode={category.countryCode}
          cartItem={cartItem}
          onComplete={onComplete}
        />
      </div>
    </BookingProvider>
  );
};

export default BookingContainer;