import React from 'react';
import InputText from '@/components/InputText';
import SelectChoice from '@/components/SelectChoice';
import ResponsableInputFields from '@/components/Inscription/ResponsableInputFields';

const levels = [
    { value:'1', label: 'TPS - Très Petite Section'},
    { value:'2', label: 'PS - Petite Section'},
    { value:'3', label: 'MS - Moyenne Section'},
    { value:'4', label: 'GS - Grande Section'},
];

export default function StudentInfoForm({ formData, updateFormField, guardians, setGuardians, errors }) {
    const getError = (field) => {
        return errors?.student?.[field]?.[0];
    };

    return (
        <>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                <h2 className="text-xl font-bold mb-4 text-gray-800">Informations de l&apos;élève</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <InputText
                        name="last_name"
                        label="Nom"
                        value={formData.last_name}
                        onChange={(e) => updateFormField('last_name', e.target.value)}
                        required
                        errorMsg={getError('last_name')}
                    />
                    <InputText
                        name="first_name"
                        label="Prénom"
                        value={formData.first_name}
                        onChange={(e) => updateFormField('first_name', e.target.value)}
                        errorMsg={getError('first_name')}
                        required
                    />
                    <InputText
                        name="nationality"
                        label="Nationalité"
                        value={formData.nationality}
                        required
                        onChange={(e) => updateFormField('nationality', e.target.value)}
                    />
                    <InputText
                        name="birth_date"
                        type="date"
                        label="Date de Naissance"
                        value={formData.birth_date}
                        onChange={(e) => updateFormField('birth_date', e.target.value)}
                        required
                        errorMsg={getError('birth_date')}
                    />
                    <InputText
                        name="birth_place"
                        label="Lieu de Naissance"
                        value={formData.birth_place}
                        onChange={(e) => updateFormField('birth_place', e.target.value)}
                        required
                        errorMsg={getError('birth_place')}
                    />
                    <InputText
                        name="birth_postal_code"
                        label="Code Postal de Naissance"
                        value={formData.birth_postal_code}
                        onChange={(e) => updateFormField('birth_postal_code', e.target.value)}
                        required
                        errorMsg={getError('birth_postal_code')}
                    />
                    <div className="md:col-span-2">
                        <InputText
                            name="address"
                            label="Adresse"
                            value={formData.address}
                            onChange={(e) => updateFormField('address', e.target.value)}
                            required
                            errorMsg={getError('address')}
                        />
                    </div>
                    <InputText
                        name="attending_physician"
                        label="Médecin Traitant"
                        value={formData.attending_physician}
                        onChange={(e) => updateFormField('attending_physician', e.target.value)}
                        required
                        errorMsg={getError('attending_physician')}
                    />
                    <SelectChoice
                        name="level"
                        label="Niveau"
                        placeHolder="Sélectionner un niveau"
                        selected={formData.level}
                        callback={(e) => updateFormField('level', e.target.value)}
                        choices={levels}
                        required
                        errorMsg={getError('level')}
                    />
                </div>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                <h2 className="text-xl font-bold mb-4 text-gray-800">Responsables</h2>
                <ResponsableInputFields
                    guardians={guardians}
                    onGuardiansChange={(id, field, value) => {
                        const updatedGuardians = guardians.map(resp =>
                            resp.id === id ? { ...resp, [field]: value } : resp
                        );
                        setGuardians(updatedGuardians);
                    }}
                    addGuardian={(e) => {
                        e.preventDefault();
                        setGuardians([...guardians, { id: Date.now() }]);
                    }}
                    deleteGuardian={(index) => {
                        const newArray = [...guardians];
                        newArray.splice(index, 1);
                        setGuardians(newArray);
                    }}
                    errors={errors?.student?.guardians || []}
                />
            </div>
        </>
    );
}