import { useDispatch, useSelector } from 'react-redux';
import { updateFieldAndSaveToAPI, updateFormFields } from '../../app/reducers/registrationstep1';
import { AppDispatch, RootState } from '../../app/store';

export default function Education() {
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    const dispatch = useDispatch<AppDispatch>();

    const handleEducationSelect = (education: {name: string , value: number}) => {
        dispatch(updateFormFields({
            ['education']: education.name
          }));
          dispatch(updateFieldAndSaveToAPI({ fieldName: 'education', value: {education: education.value } }));
    };

    return (
        <div className="flex flex-col bg-white">
            {/* Education icon */}
            <div className="flex justify-center mt-4">
                <div className="w-32 h-32 rounded-full bg-green-100 flex items-center justify-center">
                    <img 
                        src="/src/images/registration/education.png" 
                        alt="Education" 
                        className="w-32 h-32"
                    />
                </div>
            </div>

            {/* Title */}
            <div className="mt-6 px-6">
                <h1 className="text-2xl font-bold text-center">Select your highest education</h1>
            </div>

            {/* Education options */}
            <div className="mt-6 px-6">
                <div className="h-[320px] overflow-y-auto">
                    {attributes.educations.map((education) => (
                        <div 
                            key={education.id}
                            className={`py-3 border-b border-gray-100 flex items-center cursor-pointer ${
                                registrationstep1.formFields.education.value === education.name ? 'text-primary' : ''
                            }`}
                            onClick={() => handleEducationSelect({name: education.name, value: education.id })}
                        >
                            <span className={registrationstep1.formFields.education.value === education.name ? 'text-primary' : ''}>{education.name}</span>
                            {registrationstep1.formFields.education.value === education.name && (
                                <div className="ml-auto">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                    </svg>
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}