import React from 'react';
import RadioList from '@/components/RadioList';
import DateRange from '@/components/Structure/Configuration/DateRange';
import TimeRange from '@/components/Structure/Configuration/TimeRange';
import CheckBoxList from '@/components/CheckBoxList';

const PlanningConfiguration = ({
  formData,
  handleChange,
  handleTimeChange,
  handleJoursChange,
  typeEmploiDuTemps,
}) => {
  const daysOfWeek = [
    { id: 1, name: 'lun' },
    { id: 2, name: 'mar' },
    { id: 3, name: 'mer' },
    { id: 4, name: 'jeu' },
    { id: 5, name: 'ven' },
    { id: 6, name: 'sam' },
  ];

  const isLabelAttenuated = (item) => {
    return !formData.opening_days.includes(parseInt(item.id));
  };

  return (
    <div className="space-y-4">
      <label className="mt-6 block text-2xl font-medium text-gray-700">
        Emploi du temps
      </label>

      <div className="flex justify-between space-x-4 items-start">
        <div className="w-1/2">
          <RadioList
            items={typeEmploiDuTemps}
            formData={formData}
            handleChange={handleChange}
            fieldName="type"
            className="w-full"
          />
        </div>

        {/* Plage horaire */}
        <div className="w-1/2">
          <TimeRange
            startTime={formData.time_range[0]}
            endTime={formData.time_range[1]}
            onStartChange={(e) => handleTimeChange(e, 0)}
            onEndChange={(e) => handleTimeChange(e, 1)}
          />

          {/* CheckBoxList */}
          <CheckBoxList
            items={daysOfWeek}
            formData={formData}
            handleChange={handleJoursChange}
            fieldName="opening_days"
            horizontal={true}
            labelAttenuated={isLabelAttenuated}
          />
        </div>
      </div>

      {/* DateRange */}
      <div className="space-y-4 w-full">
        {formData.type === 2 && (
          <>
            <DateRange
              nameStart="date_debut_semestre_1"
              nameEnd="date_fin_semestre_1"
              valueStart={formData.date_debut_semestre_1}
              valueEnd={formData.date_fin_semestre_1}
              onChange={handleChange}
              label="Semestre 1"
            />
            <DateRange
              nameStart="date_debut_semestre_2"
              nameEnd="date_fin_semestre_2"
              valueStart={formData.date_debut_semestre_2}
              valueEnd={formData.date_fin_semestre_2}
              onChange={handleChange}
              label="Semestre 2"
            />
          </>
        )}

        {formData.type === 3 && (
          <>
            <DateRange
              nameStart="date_debut_trimestre_1"
              nameEnd="date_fin_trimestre_1"
              valueStart={formData.date_debut_trimestre_1}
              valueEnd={formData.date_fin_trimestre_1}
              onChange={handleChange}
              label="Trimestre 1"
            />
            <DateRange
              nameStart="date_debut_trimestre_2"
              nameEnd="date_fin_trimestre_2"
              valueStart={formData.date_debut_trimestre_2}
              valueEnd={formData.date_fin_trimestre_2}
              onChange={handleChange}
              label="Trimestre 2"
            />
            <DateRange
              nameStart="date_debut_trimestre_3"
              nameEnd="date_fin_trimestre_3"
              valueStart={formData.date_debut_trimestre_3}
              valueEnd={formData.date_fin_trimestre_3}
              onChange={handleChange}
              label="Trimestre 3"
            />
          </>
        )}
      </div>
    </div>
  );
};

export default PlanningConfiguration;
