zapishis-client/apps/web/components/schedule/calendar.tsx

'use client';

import { useCustomerQuery } from '@/hooks/api/customers';
import { useSlotsQuery } from '@/hooks/api/slots';
import { useDateTimeStore } from '@/stores/datetime';
import { Calendar } from '@repo/ui/components/ui/calendar';
import { getDateUTCRange } from '@repo/utils/datetime-format';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

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

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

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

  const [currentMonthDate, setCurrentMonthDate] = useState(new Date());

  const { endOfMonth, startOfMonth } = getDateUTCRange(currentMonthDate).month();

  const { data: { slots } = {} } = useSlotsQuery({
    filters: {
      datetime_start: {
        gte: startOfMonth,
        lte: endOfMonth,
      },
      master: {
        documentId: {
          eq: customer?.documentId,
        },
      },
    },
  });

  return (
    <Calendar
      className="bg-background"
      // disabled={(date) => {
      //   return dayjs().isAfter(dayjs(date), 'day');
      // }}
      mode="single"
      modifiers={{
        hasEvent: (date) => {
          return slots?.some((slot) => dayjs(slot?.datetime_start).isSame(date, 'day')) || false;
        },
      }}
      modifiersClassNames={{
        hasEvent: 'border-primary border-2 rounded-xl',
      }}
      onMonthChange={(date) => setCurrentMonthDate(date)}
      onSelect={(date) => {
        if (date) setSelectedDate(date);
      }}
      selected={selectedDate}
    />
  );
}