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

import React, { useState } from 'react';
import SelectChoice from '@/components/SelectChoice';
import { Users } from 'lucide-react';
import DraggableSpeciality from '@/components/Structure/Planning/DraggableSpeciality';

const groupSpecialitiesBySubject = (enseignants) => {
  const groupedSpecialities = {};

  enseignants.forEach(teacher => {
    teacher.specialites.forEach(specialite => {
      if (!groupedSpecialities[specialite.id]) {
        groupedSpecialities[specialite.id] = {
          ...specialite,
          teachers: [`${teacher.nom} ${teacher.prenom}`],
        };
      } else {
        groupedSpecialities[specialite.id].teachers.push(`${teacher.nom} ${teacher.prenom}`);
      }
    });
  });

  return Object.values(groupedSpecialities);
};

const ClassesInfo = ({ classes, onClassSelect }) => {
  const [selectedClass, setSelectedClass] = useState(null); // Nouvelle variable d'état pour la classe sélectionnée

  const handleClassChange = (event) => {
    const classId = event.target.value;
    const selectedClass = classes.find(classe => classe.id === parseInt(classId));
    setSelectedClass(selectedClass);
    onClassSelect(selectedClass);
  };

  const classChoices = [
    { value: '', label: 'Sélectionner...' },
    ...classes.map(classe => ({
      value: classe.id,
      label: classe.nom_ambiance,
    }))
  ];

  // S'assurer que `selectedClass` n'est pas null avant d'appeler `groupSpecialitiesBySubject`
  const groupedSpecialities = selectedClass ? groupSpecialitiesBySubject(selectedClass.enseignants) : [];

  return (
    <div className="p-4 bg-white shadow rounded mb-4">
      {classes.length > 0 ? (
        <SelectChoice
          name="classes"
          label="Classes"
          IconItem={Users}
          selected={selectedClass ? selectedClass.id : ''}
          choices={classChoices}
          callback={handleClassChange}
        />
      ) : (
        <p>Aucune classe disponible.</p>
      )}

      {selectedClass && (
        <div className="specialities mt-4">
          <label className="block text-sm font-medium text-gray-700 mb-4">Spécialités</label>
          {groupedSpecialities.map((specialite, index) => {
            // Combiner l'ID de la spécialité avec les IDs des enseignants pour créer une clé unique
            const uniqueId = `${specialite.id}-${specialite.teachers.map(teacher => teacher.id).join('-')}-${index}`;
            
            return (
              <DraggableSpeciality
                key={uniqueId}  // Utilisation de l'ID unique généré
                specialite={specialite}
              />
            );
          })}
        </div>
      )}
    </div>
  );
};

export default ClassesInfo;