n3wt-school/Front-End/src/components/Inscription/ResponsableInputFields.js

import InputText from '@/components/InputText';
import InputPhone from '@/components/InputPhone';
import React, { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { Trash2, Plus, Users } from 'lucide-react';
import SectionHeader from '@/components/SectionHeader';

export default function ResponsableInputFields({
  guardians,
  setGuardians,
  errors,
  setIsPageValid,
}) {
  const t = useTranslations('ResponsableInputFields');

  useEffect(() => {
    const isValid =
      guardians.length > 0 &&
      guardians.every((guardian, index) => {
        return !Object.keys(guardian).some(
          (field) => getLocalError(index, field) !== ''
        );
      });

    setIsPageValid(isValid);
  }, [guardians, setIsPageValid]);

  const getError = (index, field) => {
    return errors[index]?.[field]?.[0];
  };

  const getLocalError = (index, field) => {
    if (
      // Student Form
      (field === 'last_name' &&
        (!guardians[index].last_name ||
          guardians[index].last_name.trim() === '')) ||
      (field === 'first_name' &&
        (!guardians[index].first_name ||
          guardians[index].first_name.trim() === '')) ||
      (field === 'email' &&
        (!guardians[index].associated_profile_email ||
          guardians[index].associated_profile_email.trim() === '')) ||
      (field === 'birth_date' &&
        (!guardians[index].birth_date ||
          guardians[index].birth_date.trim() === '')) ||
      (field === 'profession' &&
        (!guardians[index].profession ||
          guardians[index].profession.trim() === '')) ||
      (field === 'address' &&
        (!guardians[index].address || guardians[index].address.trim() === ''))
    ) {
      return 'Champs requis';
    }
    return '';
  };

  const onGuardiansChange = (id, field, value) => {
    const updatedGuardians = guardians.map((guardian) =>
      guardian.id === id ? { ...guardian, [field]: value } : guardian
    );
    setGuardians(updatedGuardians);
  };

  const addGuardian = () => {
    setGuardians([...guardians, { id: Date.now(), name: '', email: '' }]);
  };

  const deleteGuardian = (index) => {
    const updatedGuardians = guardians.filter((_, i) => i !== index);
    setGuardians(updatedGuardians);
  };

  return (
    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
      <SectionHeader
        icon={Users}
        title={`Responsables légaux`}
        description={`Remplissez les champs requis`}
      />
      {guardians.map((item, index) => (
        <div className="p-6 " key={index}>
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-xl font-bold">
              {t('responsable')} {index + 1}
            </h3>
            {guardians.length > 1 && (
              <Trash2
                className="w-5 h-5 text-red-500 cursor-pointer hover:text-red-700 transition-colors"
                onClick={() => deleteGuardian(index)}
              />
            )}
          </div>

          <input type="hidden" name="idResponsable" value={item.id} />

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <InputText
              name="nomResponsable"
              type="text"
              label={t('lastname')}
              value={item.last_name}
              onChange={(event) => {
                onGuardiansChange(item.id, 'last_name', event.target.value);
              }}
              errorMsg={
                getError(index, 'last_name') ||
                getLocalError(index, 'last_name')
              }
              required
            />
            <InputText
              name="prenomResponsable"
              type="text"
              label={t('firstname')}
              value={item.first_name}
              onChange={(event) => {
                onGuardiansChange(item.id, 'first_name', event.target.value);
              }}
              errorMsg={
                getError(index, 'first_name') ||
                getLocalError(index, 'first_name')
              }
              required
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <InputText
              name="mailResponsable"
              type="email"
              label={t('email')}
              value={item.associated_profile_email}
              onChange={(event) => {
                onGuardiansChange(
                  item.id,
                  'associated_profile_email',
                  event.target.value
                );
              }}
              required
              errorMsg={
                getError(index, 'email') || getLocalError(index, 'email')
              }
            />
            <InputPhone
              name="telephoneResponsable"
              label="phone"
              value={item.phone}
              onChange={(event) => {
                onGuardiansChange(item.id, 'phone', event);
              }}
              required
              errorMsg={getError(index, 'phone')}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <InputText
              name="dateNaissanceResponsable"
              type="date"
              label={t('birthdate')}
              value={item.birth_date}
              onChange={(event) => {
                onGuardiansChange(item.id, 'birth_date', event.target.value);
              }}
              required
              errorMsg={
                getError(index, 'birth_date') ||
                getLocalError(index, 'birth_date')
              }
            />
            <InputText
              name="professionResponsable"
              type="text"
              label={t('profession')}
              value={item.profession}
              onChange={(event) => {
                onGuardiansChange(item.id, 'profession', event.target.value);
              }}
              required
              errorMsg={
                getError(index, 'profession') ||
                getLocalError(index, 'profession')
              }
            />
          </div>

          <div className="grid grid-cols-1 gap-4">
            <InputText
              name="adresseResponsable"
              type="text"
              label={t('address')}
              value={item.address}
              onChange={(event) => {
                onGuardiansChange(item.id, 'address', event.target.value);
              }}
              required
              errorMsg={
                getError(index, 'address') || getLocalError(index, 'address')
              }
            />
          </div>
        </div>
      ))}

      <div className="flex justify-center">
        <Plus
          className="w-8 h-8 text-green-500 cursor-pointer hover:text-green-700 transition-colors border-2 border-green-500 hover:border-green-700 rounded-full p-1"
          onClick={(e) => addGuardian(e)}
        />
      </div>
    </div>
  );
}