'use client';
import {
  PlanningModes,
  PlanningProvider,
  RecurrenceType,
} from '@/context/PlanningContext';
import Calendar from '@/components/Calendar/Calendar';
import EventModal from '@/components/Calendar/EventModal';
import ScheduleNavigation from '@/components/Calendar/ScheduleNavigation';
import { useState } from 'react';
import { useEstablishment } from '@/context/EstablishmentContext';

export default function Page() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [eventData, setEventData] = useState({
    title: '',
    description: '',
    start: '',
    end: '',
    location: '',
    planning: '', // Enlever la valeur par défaut ici
    recursionType: RecurrenceType.NONE,
    selectedDays: [],
    recursionEnd: '',
    customInterval: 1,
    customUnit: 'days',
    viewType: 'week', // Ajouter la vue semaine par défaut
  });
  const { selectedEstablishmentId } = useEstablishment();

  const initializeNewEvent = (date = new Date()) => {
    // S'assurer que date est un objet Date valide
    const eventDate = date instanceof Date ? date : new Date();

    setEventData({
      title: '',
      description: '',
      start: eventDate.toISOString(),
      end: new Date(eventDate.getTime() + 2 * 60 * 60 * 1000).toISOString(),
      location: '',
      planning: '', // Ne pas définir de valeur par défaut ici non plus
      recursionType: RecurrenceType.NONE,
      selectedDays: [],
      recursionEnd: new Date(
        eventDate.getTime() + 2 * 60 * 60 * 1000
      ).toISOString(),
      customInterval: 1,
      customUnit: 'days',
    });
    setIsModalOpen(true);
  };

  return (
    <PlanningProvider
      establishmentId={selectedEstablishmentId}
      modeSet={PlanningModes.PLANNING}
    >
      <div className="flex h-full overflow-hidden">
        <ScheduleNavigation />
        <Calendar
          onDateClick={initializeNewEvent}
          onEventClick={(event) => {
            setEventData(event);
            setIsModalOpen(true);
          }}
        />
        <EventModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          eventData={eventData}
          setEventData={setEventData}
        />
      </div>
    </PlanningProvider>
  );
}