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 = () => {
    logger.debug(formData);
    /*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-primary focus:ring-primary hover:ring-tertiary checked:bg-primary 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-primary text-white hover:bg-primary'
          }`}
          disabled={!formData.classeAssocie_id}
        >
          Associer
        </button>
      </div>
    </form>
  );
};

export default AffectationClasseForm;
