'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';
import { usePlanning } from '@/context/PlanningContext';

export default function Page() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isDrawerOpen, setIsDrawerOpen] = 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 PlanningContent = ({ isDrawerOpen, setIsDrawerOpen, isModalOpen, setIsModalOpen, eventData, setEventData }) => {
    const { selectedSchedule, schedules } = usePlanning();

    const initializeNewEvent = (date = new Date()) => {
      const eventDate = date instanceof Date ? date : new Date();

      const selected =
        schedules.find((schedule) => Number(schedule.id) === Number(selectedSchedule)) ||
        schedules[0];

      setEventData({
        title: '',
        description: '',
        start: eventDate.toISOString(),
        end: new Date(eventDate.getTime() + 2 * 60 * 60 * 1000).toISOString(),
        location: '',
        planning: selected?.id || '',
        color: selected?.color || '',
        recursionType: RecurrenceType.NONE,
        selectedDays: [],
        recursionEnd: new Date(
          eventDate.getTime() + 2 * 60 * 60 * 1000
        ).toISOString(),
        customInterval: 1,
        customUnit: 'days',
      });
      setIsModalOpen(true);
    };

    return (
      <div className="flex h-full overflow-hidden">
        <ScheduleNavigation
          isOpen={isDrawerOpen}
          onClose={() => setIsDrawerOpen(false)}
        />
        <Calendar
          onDateClick={initializeNewEvent}
          onEventClick={(event) => {
            setEventData(event);
            setIsModalOpen(true);
          }}
          onOpenDrawer={() => setIsDrawerOpen(true)}
        />
        <EventModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          eventData={eventData}
          setEventData={setEventData}
        />
      </div>
    );
  };

  return (
    <PlanningProvider
      establishmentId={selectedEstablishmentId}
      modeSet={PlanningModes.PLANNING}
    >
      <PlanningContent
        isDrawerOpen={isDrawerOpen}
        setIsDrawerOpen={setIsDrawerOpen}
        isModalOpen={isModalOpen}
        setIsModalOpen={setIsModalOpen}
        eventData={eventData}
        setEventData={setEventData}
      />
    </PlanningProvider>
  );
}
