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

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


    const handleReligionSelect = (religion: {name: string, id: number}) => {
        dispatch(updateFormFields({
            ['religion']: religion.name
          }));

        dispatch(updateFieldAndSaveToAPI({ fieldName: 'religion', value: {religion: religion.id} }));
    };

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

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

            {/* Religion options */}
            <div className="mt-8 px-6 flex-1 max-w-md m-auto">
                <div className="grid grid-cols-2 gap-4">
                    <div 
                        className={`rounded-3xl cursor-pointer ${
                            registrationstep1.formFields.religion.value === 'Islam' ? 'opacity-100' : 'opacity-50'
                        }`}
                        onClick={() => handleReligionSelect({name: 'Islam', id: 1})}
                    >
                        <img 
                            src="/src/images/registration/islam.png" 
                            alt="Islam" 
                            className="w-full h-auto"
                        />
                    </div>
                    
                    <div 
                        className={`rounded-lg cursor-pointer ${
                            registrationstep1.formFields.religion.value === 'Hindu' ? 'opacity-100' : 'opacity-50'
                        }`}
                        onClick={() => handleReligionSelect({name: 'Hindu', id: 2})}
                    >
                        <img 
                            src="/src/images/registration/hindu.png" 
                            alt="Hindu" 
                            className="w-full h-auto"
                        />
                    </div>
                    
                    <div 
                        className={`rounded-lg cursor-pointer ${
                            registrationstep1.formFields.religion.value === 'Christian' ? 'opacity-100' : 'opacity-50'
                        }`}
                        onClick={() => handleReligionSelect({name: 'Christian', id: 3})}
                    >
                        <img 
                            src="/src/images/registration/christian.png" 
                            alt="Christian" 
                            className="w-full h-auto"
                        />
                    </div>
                    
                    <div 
                        className={`rounded-lg cursor-pointer ${
                            registrationstep1.formFields.religion.value === 'Buddhist' ? 'opacity-100' : 'opacity-50'
                        }`}
                        onClick={() => handleReligionSelect({name: 'Buddhist', id: 4})}
                    >
                        <img 
                            src="/src/images/registration/buddhism.png" 
                            alt="Buddhism" 
                            className="w-full h-auto"
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}