'use client';

import { isBefore, isSameDay } from 'date-fns';
import { uniq } from 'lodash';

import { Calendar } from '@kit/ui/shadcn/calendar';
import { Card } from '@kit/ui/shadcn/card';

import { ServiceCategory } from '../service-categories';
import { BookingProvider, useBooking } from './booking.provider';
import LocationSelector from './location-selector';
import ServiceSelector from './service-selector';
import TimeSlots from './time-slots';

const BookingCalendar = () => {
  const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } =
    useBooking();
  const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime));

  return (
    <Card className="mb-4">
      <Calendar
        mode="single"
        selected={selectedDate}
        onSelect={setSelectedDate}
        disabled={(date) => {
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          return (
            isBefore(date, today) ||
            !availableDates.some((dateWithBooking) =>
              isSameDay(date, dateWithBooking),
            )
          );
        }}
        className="rounded-md border"
        {...(isLoadingTimeSlots && {
          className: 'rounded-md border opacity-50 pointer-events-none',
        })}
      />
    </Card>
  );
};

const BookingContainer = ({ category }: { category: ServiceCategory }) => {
  return (
    <BookingProvider category={category}>
      <div className="flex max-h-full flex-row gap-6">
        <div className="flex flex-col">
          <ServiceSelector products={category.products} />
          <BookingCalendar />
          <LocationSelector />
        </div>
        <TimeSlots countryCode={category.countryCode} />
      </div>
    </BookingProvider>
  );
};

export default BookingContainer;