import React, { useState } from 'react';

const AffectationClasseForm = ({ eleve = {}, onSubmit, classes }) => {

  const [formData, setFormData] = useState({
    classeAssocie_id: eleve?.classeAssocie_id || null,
  });

  const handleChange = (e) => {
    const { name, value, type } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: parseInt(value, 10),
    }));
  };

  const handleSubmit = () => {
    onSubmit({
      eleve: {
          ...formData
      },
      etat:5
  });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700">
          Classes
        </label>
        <div className="mt-2 grid grid-cols-1 gap-4">
          {classes.map(classe => (
            <div key={classe.id} className="flex items-center">
              <input
                  type="radio"
                  id={`classe-${classe.id}`}
                  name="classeAssocie_id"
                  value={classe.id}
                  checked={formData.classeAssocie_id === classe.id}
                  onChange={handleChange}
                  className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
              />
              <label htmlFor={`classe-${classe.id}`} className="ml-2 block text-sm text-gray-900 flex items-center">
                {classe.atmosphere_name}
              </label>
            </div>
          ))}
        </div>
      </div>
      <div className="flex justify-end mt-4 space-x-4">
        <button
            onClick={handleSubmit}
            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
                (!formData.classeAssocie_id )
                    ? "bg-gray-300 text-gray-700 cursor-not-allowed"
                    : "bg-emerald-500 text-white hover:bg-emerald-600"
            }`}
            disabled={(!formData.classeAssocie_id)}
        >
            Associer
        </button>
      </div>
    </form>
  );
};

export default AffectationClasseForm;