n3wt-school/Front-End/src/components/Calendar/Calendar.js

import React, { useEffect, useState } from 'react';
import { usePlanning, PlanningModes } from '@/context/PlanningContext';
import WeekView from '@/components/Calendar/WeekView';
import MonthView from '@/components/Calendar/MonthView';
import YearView from '@/components/Calendar/YearView';
import PlanningView from '@/components/Calendar/PlanningView';
import ToggleView from '@/components/ToggleView';
import { ChevronLeft, ChevronRight, Plus, ChevronDown } from 'lucide-react';
import {
  format,
  addWeeks,
  addMonths,
  addYears,
  subWeeks,
  subMonths,
  subYears,
  getWeek,
  setMonth,
  setYear,
} from 'date-fns';
import { fr } from 'date-fns/locale';
import { AnimatePresence, motion } from 'framer-motion'; // Ajouter cet import
import logger from '@/utils/logger';

const Calendar = ({ modeSet, onDateClick, onEventClick, planningClassName='' }) => {
  const {
    currentDate,
    setCurrentDate,
    viewType,
    setViewType,
    events,
    hiddenSchedules,
    planningMode,
    parentView
  } = usePlanning();
  const [visibleEvents, setVisibleEvents] = useState([]);
  const [showDatePicker, setShowDatePicker] = useState(false);

  // Ajouter ces fonctions pour la gestion des mois et années
  const months = Array.from({ length: 12 }, (_, i) => ({
    value: i,
    label: format(new Date(2024, i, 1), 'MMMM', { locale: fr }),
  }));

  const years = Array.from({ length: 10 }, (_, i) => ({
    value: new Date().getFullYear() - 5 + i,
    label: new Date().getFullYear() - 5 + i,
  }));

  const handleMonthSelect = (monthIndex) => {
    setCurrentDate(setMonth(currentDate, monthIndex));
    setShowDatePicker(false);
  };

  const handleYearSelect = (year) => {
    setCurrentDate(setYear(currentDate, year));
    setShowDatePicker(false);
  };

  useEffect(() => {
    // S'assurer que le filtrage est fait au niveau parent
    const filtered = events?.filter(
      (event) => !hiddenSchedules.includes(event.planning)
    );
    setVisibleEvents(filtered);
    logger.debug('Events filtrés:', filtered); // Debug
  }, [events, hiddenSchedules]);

  const navigateDate = (direction) => {
    const getNewDate = () => {
      switch (viewType) {
        case 'week':
          return direction === 'next'
            ? addWeeks(currentDate, 1)
            : subWeeks(currentDate, 1);
        case 'month':
          return direction === 'next'
            ? addMonths(currentDate, 1)
            : subMonths(currentDate, 1);
        case 'year':
          return direction === 'next'
            ? addYears(currentDate, 1)
            : subYears(currentDate, 1);
        default:
          return currentDate;
      }
    };

    setCurrentDate(getNewDate());
  };

  return (
    <div className="flex-1 flex flex-col">
      <div className="flex items-center justify-between p-4 bg-white sticky top-0 z-30 border-b shadow-sm h-[64px]">
        {/* Navigation à gauche */}
        {planningMode === PlanningModes.PLANNING && (
          <div className="flex items-center gap-4">
            <button
              onClick={() => setCurrentDate(new Date())}
              className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
            >
              Aujourd&apos;hui
            </button>
            <button
              onClick={() => navigateDate('prev')}
              className="p-2 hover:bg-gray-100 rounded-full"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
            <div className="relative">
              <button
                onClick={() => setShowDatePicker(!showDatePicker)}
                className="flex items-center gap-1 px-2 py-1 hover:bg-gray-100 rounded-md"
              >
                <h2 className="text-xl font-semibold">
                  {format(
                    currentDate,
                    viewType === 'year' ? 'yyyy' : 'MMMM yyyy',
                    { locale: fr }
                  )}
                </h2>
                <ChevronDown className="w-4 h-4" />
              </button>
              {showDatePicker && (
                <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-64">
                  {viewType !== 'year' && (
                    <div className="p-2 border-b">
                      <div className="grid grid-cols-3 gap-1">
                        {months.map((month) => (
                          <button
                            key={month.value}
                            onClick={() => handleMonthSelect(month.value)}
                            className="p-2 text-sm hover:bg-gray-100 rounded-md"
                          >
                            {month.label}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                  <div className="p-2">
                    <div className="grid grid-cols-3 gap-1">
                      {years.map((year) => (
                        <button
                          key={year.value}
                          onClick={() => handleYearSelect(year.value)}
                          className="p-2 text-sm hover:bg-gray-100 rounded-md"
                        >
                          {year.label}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
            <button
              onClick={() => navigateDate('next')}
              className="p-2 hover:bg-gray-100 rounded-full"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
          </div>
        )}

        {/* Centre : numéro de semaine ou classe/niveau */}
        <div className="flex-1 flex justify-center">
          {((planningMode === PlanningModes.PLANNING || planningMode === PlanningModes.CLASS_SCHEDULE) && viewType === 'week' && !parentView) && (
            <div className="flex items-center gap-1 text-sm font-medium text-gray-600">
              <span>Semaine</span>
              <span className="px-2 py-1 bg-gray-100 rounded-md">
                {getWeek(currentDate, { weekStartsOn: 1 })}
              </span>
            </div>
          )}
          {parentView && (
            <span className="px-2 py-1 bg-gray-100 rounded-md text-base font-semibold">
              {/* À adapter selon les props disponibles */}
              {planningClassName}
            </span>
          )}
        </div>

        {/* Contrôles à droite */}
        <div className="flex items-center gap-4">
          {planningMode === PlanningModes.PLANNING && (
            <ToggleView viewType={viewType} setViewType={setViewType} />
          )}
          {(planningMode === PlanningModes.PLANNING || (planningMode === PlanningModes.CLASS_SCHEDULE && !parentView)) && (
            <button
              onClick={onDateClick}
              className="w-10 h-10 flex items-center justify-center bg-emerald-600 text-white rounded-full hover:bg-emerald-700 shadow-md transition-colors"
            >
              <Plus className="w-5 h-5" />
            </button>
          )}
        </div>
      </div>

      {/* Contenu scrollable */}
      <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
        <AnimatePresence mode="wait">
          {viewType === 'week' && (
            <motion.div
              key="week"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
              className="h-full flex flex-col"
            >
              <WeekView
                onDateClick={onDateClick}
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
          {viewType === 'month' && (
            <motion.div
              key="month"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <MonthView
                onDateClick={onDateClick}
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
          {viewType === 'year' && (
            <motion.div
              key="year"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <YearView onDateClick={onDateClick} events={visibleEvents} />
            </motion.div>
          )}
          {viewType === 'planning' && (
            <motion.div
              key="planning"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <PlanningView
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default Calendar;