'use client';

import { DaySlotAddForm } from './day-slot-add-form';
import { SlotCard } from './slot-card';
import { useCustomerQuery } from '@/hooks/api/customers';
import { useMasterSlotsQuery } from '@/hooks/api/slots';
import { useDateTimeStore } from '@/stores/datetime';
import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
import { formatDate } from '@repo/utils/datetime-format';

export function DaySlotsList() {
  const { data: { customer } = {} } = useCustomerQuery();

  const selectedDate = useDateTimeStore((store) => store.date);

  const { data: { slots } = {}, isLoading } = useMasterSlotsQuery({
    filters: {
      date: { eq: formatDate(selectedDate).db() },
      master: { documentId: { eq: customer?.documentId } },
    },
  });

  if (isLoading) return <LoadingSpinner />;

  return (
    <div className="flex flex-col space-y-2 px-4">
      <h1 className="font-bold">Слоты</h1>
      {slots?.map((slot) => slot && <SlotCard key={slot.documentId} {...slot} />)}
      <DaySlotAddForm />
    </div>
  );
}