n3wt-school/Front-End/src/components/Structure/Planning/PlanningClassView.js

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { format, addDays, startOfWeek } from 'date-fns';
import { fr } from 'date-fns/locale';
import DropTargetCell from '@/components/Structure/Planning/DropTargetCell';
import { useClasseForm } from '@/context/ClasseFormContext';
import { useClasses } from '@/context/ClassesContext';
import { Calendar } from 'lucide-react';
import SpecialityEventModal from '@/components/Structure/Planning/SpecialityEventModal'; // Assurez-vous du bon chemin d'importation

const PlanningClassView = ({
  schedule,
  onDrop,
  selectedLevel,
  handleUpdatePlanning,
  classe,
}) => {
  const { formData } = useClasseForm();
  const { determineInitialPeriod } = useClasses();

  const [currentPeriod, setCurrentPeriod] = useState(
    schedule?.emploiDuTemps
      ? determineInitialPeriod(schedule.emploiDuTemps)
      : null
  );
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCell, setSelectedCell] = useState(null);
  const [existingEvent, setExistingEvent] = useState(null);

  useEffect(() => {
    if (schedule?.emploiDuTemps) {
      setCurrentPeriod(determineInitialPeriod(schedule.emploiDuTemps));
    }
  }, [schedule]);

  if (!schedule || !schedule.emploiDuTemps) {
    return (
      <div className="w-full p-4 bg-gray-50 rounded-lg shadow-inner">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-3xl text-gray-800 flex items-center">
            <Calendar className="w-8 h-8 mr-2" />
            Planning
          </h2>
        </div>
      </div>
    );
  }

  const emploiDuTemps =
    schedule.emploiDuTemps[currentPeriod] || schedule.emploiDuTemps;
  const joursOuverture = Object.keys(emploiDuTemps);
  const currentWeekDays = joursOuverture
    .map((day) => {
      switch (day.toLowerCase()) {
        case 'lundi':
          return 1;
        case 'mardi':
          return 2;
        case 'mercredi':
          return 3;
        case 'jeudi':
          return 4;
        case 'vendredi':
          return 5;
        case 'samedi':
          return 6;
        case 'dimanche':
          return 7;
        default:
          return 0;
      }
    })
    .sort((a, b) => a - b) // Trier les jours dans l'ordre croissant
    .map((day) =>
      addDays(startOfWeek(new Date(), { weekStartsOn: 1 }), day - 1)
    ); // Calculer les dates à partir du lundi

  const getFilteredEvents = (day, time, level) => {
    const [hour, minute] = time.split(':').map(Number);
    const startTime = hour + minute / 60; // Convertir l'heure en fraction d'heure

    return (
      emploiDuTemps[day.toLowerCase()]?.filter((event) => {
        const [eventHour, eventMinute] = event.heure.split(':').map(Number);
        const eventStartTime = eventHour + eventMinute / 60;
        const eventEndTime = eventStartTime + parseFloat(event.duree);

        // Filtrer en fonction du selectedLevel
        return (
          schedule.niveau === level &&
          startTime >= eventStartTime &&
          startTime < eventEndTime
        );
      }) || []
    );
  };

  const handleCellClick = (hour, day) => {
    const cellEvents = getFilteredEvents(day, hour, selectedLevel);

    setSelectedCell({ hour, day, selectedLevel });
    setExistingEvent(cellEvents.length ? cellEvents[0] : null);
    setIsModalOpen(true);
  };

  const renderTimeSlots = () => {
    const timeSlots = [];

    for (
      let hour = parseInt(formData.time_range[0], 10);
      hour <= parseInt(formData.time_range[1], 10);
      hour++
    ) {
      const hourString = hour.toString().padStart(2, '0');

      timeSlots.push(
        <React.Fragment key={`${hourString}:00-${Math.random()}`}>
          <div className="h-20 p-1 text-right text-sm text-gray-500 bg-gray-100 font-medium">
            {`${hourString}:00`}
          </div>
          {currentWeekDays.map((date, index) => {
            const day = format(date, 'iiii', { locale: fr }).toLowerCase();
            const uniqueKey = `${hourString}:00-${day}-${index}`;
            return (
              <div key={uniqueKey} className="flex flex-col">
                <DropTargetCell
                  hour={`${hourString}:00`}
                  day={day}
                  courses={getFilteredEvents(
                    day,
                    `${hourString}:00`,
                    selectedLevel
                  )}
                  onDrop={onDrop}
                  onClick={(hour, day) => handleCellClick(hour, day)}
                />
                <DropTargetCell
                  hour={`${hourString}:30`}
                  day={day}
                  courses={getFilteredEvents(
                    day,
                    `${hourString}:30`,
                    selectedLevel
                  )}
                  onDrop={onDrop}
                  onClick={(hour, day) => handleCellClick(hour, day)}
                />
              </div>
            );
          })}
        </React.Fragment>
      );
    }
    return timeSlots;
  };

  return (
    <div className="w-full p-4 bg-gray-50 rounded-lg shadow-inner">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-3xl text-gray-800 flex items-center">
          <Calendar className="w-8 h-8 mr-2" />
          Planning
        </h2>
        {schedule.emploiDuTemps.S1 && schedule.emploiDuTemps.S2 && (
          <div>
            <button
              onClick={() => setCurrentPeriod('S1')}
              className={`px-4 py-2 ${currentPeriod === 'S1' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-800'}`}
            >
              Semestre 1
            </button>
            <button
              onClick={() => setCurrentPeriod('S2')}
              className={`px-4 py-2 ${currentPeriod === 'S2' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-800'}`}
            >
              Semestre 2
            </button>
          </div>
        )}
        {schedule.emploiDuTemps.T1 &&
          schedule.emploiDuTemps.T2 &&
          schedule.emploiDuTemps.T3 && (
            <div>
              <button
                onClick={() => setCurrentPeriod('T1')}
                className={`px-4 py-2 ${currentPeriod === 'T1' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-800'}`}
              >
                Trimestre 1
              </button>
              <button
                onClick={() => setCurrentPeriod('T2')}
                className={`px-4 py-2 ${currentPeriod === 'T2' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-800'}`}
              >
                Trimestre 2
              </button>
              <button
                onClick={() => setCurrentPeriod('T3')}
                className={`px-4 py-2 ${currentPeriod === 'T3' ? 'bg-emerald-600 text-white' : 'bg-gray-200 text-gray-800'}`}
              >
                Trimestre 3
              </button>
            </div>
          )}
      </div>
      <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
        {/* En-tête des jours */}
        <div
          className="grid w-full"
          style={{
            gridTemplateColumns: `2.5rem repeat(${currentWeekDays.length}, 1fr)`,
          }}
        >
          <div className="bg-gray-50 h-14"></div>
          {currentWeekDays.map((date, index) => (
            <div
              key={`${date}-${index}`}
              className="p-3 text-center bg-emerald-100 text-emerald-800 border-r border-emerald-200"
            >
              <div className="text font-semibold">
                {format(date, 'EEEE', { locale: fr })}
              </div>
            </div>
          ))}
        </div>

        {/* Contenu du planning */}
        <div
          className="flex-1 overflow-y-auto relative"
          style={{ maxHeight: 'calc(100vh - 300px)' }}
        >
          <div
            className="grid bg-white relative"
            style={{
              gridTemplateColumns: `2.5rem repeat(${currentWeekDays.length}, 1fr)`,
            }}
          >
            {renderTimeSlots()}
          </div>
        </div>
      </div>
      <SpecialityEventModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        selectedCell={selectedCell}
        existingEvent={existingEvent}
        handleUpdatePlanning={handleUpdatePlanning}
        classe={classe}
      />
    </div>
  );
};

PlanningClassView.propTypes = {
  schedule: PropTypes.shape({
    emploiDuTemps: PropTypes.objectOf(
      PropTypes.arrayOf(
        PropTypes.shape({
          duree: PropTypes.string.isRequired,
          heure: PropTypes.string.isRequired,
          matiere: PropTypes.string.isRequired,
          teachers: PropTypes.arrayOf(PropTypes.string).isRequired,
          color: PropTypes.string.isRequired,
        })
      )
    ).isRequired,
    plageHoraire: PropTypes.shape({
      startHour: PropTypes.number.isRequired,
      endHour: PropTypes.number.isRequired,
    }).isRequired,
    joursOuverture: PropTypes.arrayOf(PropTypes.number).isRequired,
  }).isRequired,
};

export default PlanningClassView;