zapishis-client/apps/web/components/orders/order-form/datetime-select.tsx

'use client';

import { useAvailableTimeSlotsQuery } from '@/hooks/api/slots';
import { useOrderStore } from '@/stores/order';
import { Button } from '@repo/ui/components/ui/button';
import { Calendar } from '@repo/ui/components/ui/calendar';
import { formatTime } from '@repo/utils/datetime-format';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

export function DateSelect() {
  const selectedDate = useOrderStore((store) => store.date);
  const setSelectedDate = useOrderStore((store) => store.setDate);
  const setTime = useOrderStore((store) => store.setTime);
  const setSlot = useOrderStore((store) => store.setSlotId);
  const masterId = useOrderStore((store) => store.masterId);
  const serviceIds = useOrderStore((store) => store.serviceIds);

  useEffect(() => {
    if (!selectedDate) {
      setSelectedDate(new Date());
    }
  }, [selectedDate, setSelectedDate]);

  const [selectedMonthDate, setSelectedMonthDate] = useState(new Date());

  const { data: { slots } = {} } = useAvailableTimeSlotsQuery(
    {
      filters: {
        datetime_start: {
          gte: dayjs().startOf('day').toISOString(),
          lte: dayjs(selectedMonthDate).endOf('month').endOf('day').toISOString(),
        },
        master: {
          documentId: {
            eq: masterId,
          },
        },
      },
    },
    {
      services: serviceIds,
    },
  );

  return (
    <Calendar
      className="bg-background"
      disabled={(date) => {
        return (
          dayjs().isAfter(dayjs(date), 'day') ||
          !slots?.some((slot) => dayjs(slot?.datetime_start).isSame(date, 'day'))
        );
      }}
      mode="single"
      onMonthChange={(date) => setSelectedMonthDate(date)}
      onSelect={(date) => {
        if (date) setSelectedDate(date);
        setTime(null);
        setSlot(null);
      }}
      selected={selectedDate}
    />
  );
}

export function DateTimeSelect() {
  return (
    <div className="space-y-4">
      <DateSelect />
      <TimeSelect />
    </div>
  );
}

export function TimeSelect() {
  const masterId = useOrderStore((store) => store.masterId);
  const date = useOrderStore((store) => store.date);
  const serviceIds = useOrderStore((store) => store.serviceIds);

  const { data: { times } = {}, isLoading } = useAvailableTimeSlotsQuery(
    {
      filters: {
        datetime_start: {
          gte: dayjs(date).startOf('day').toISOString(),
          lte: dayjs(date).endOf('day').toISOString(),
        },
        master: {
          documentId: {
            eq: masterId,
          },
        },
      },
    },
    {
      services: serviceIds,
    },
  );

  if (isLoading || !times) return null;

  const getHour = (isoString: string) => dayjs(isoString).hour();
  const morning = times.filter(({ time }) => getHour(time) < 12);
  const afternoon = times?.filter(({ time }) => {
    const hour = getHour(time);
    return hour >= 12 && hour < 18;
  });
  const evening = times?.filter(({ time }) => getHour(time) >= 18);

  return (
    <div className="space-y-2">
      <TimeSlotsButtons times={morning} title="Утро" />
      <TimeSlotsButtons times={afternoon} title="День" />
      <TimeSlotsButtons times={evening} title="Вечер" />
    </div>
  );
}

function TimeSlotsButtons({
  times,
  title,
}: Readonly<{ times: Array<{ slotId: string; time: string }>; title: string }>) {
  const setTime = useOrderStore((store) => store.setTime);
  const setSlot = useOrderStore((store) => store.setSlotId);

  if (!times.length) return null;

  return (
    <div className="space-y-2">
      <h2 className="text-lg font-semibold">{title}</h2>
      <div className="grid grid-cols-3 gap-2">
        {times.map(({ slotId, time }) => (
          <Button
            className="mb-2"
            key={time.toString()}
            onClick={() => {
              setTime(time);
              setSlot(slotId);
            }}
            variant="outline"
          >
            {formatTime(time).user()}
          </Button>
        ))}
      </div>
    </div>
  );
}