import { useState } from 'react';
import { Camera } from 'lucide-react';
import verificationImage from '/src/images/registration/verification_image.png';
import { useDispatch, useSelector } from 'react-redux';
import { setGuardianType, updateFieldAndSaveToAPI } from '../../app/reducers/registrationstep1';
import { AppDispatch, RootState } from '../../app/store';

export default function GuardianInformation() {
    const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    const [guardianImage, setGuardianImage] = useState<string | null>(null);
    const dispatch = useDispatch<AppDispatch>();

    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = (event) => {
                setGuardianImage(event.target?.result as string);
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    };

    const handleGuardianType = (type: string, value: number) => {
        console.log(type)
        dispatch(setGuardianType(type));

        dispatch(updateFieldAndSaveToAPI({fieldName: 'guardian_type', value: { guardian_type: value }}))
    };

    return (
        <div className="space-y-6">
            {/* Guardian Type Selection */}
            <div>
                <h3 className="font-bold mb-2">Select guardian type</h3>
                <div className="flex gap-4">
                    <label className="flex items-center">
                        <input
                            type="radio"
                            name="guardianType"
                            value="Father"
                            checked={registrationstep1.guardian_type === 'father'}
                            onChange={() => handleGuardianType('father', 2)}
                            className="text-primary focus:ring-primary mr-2"
                        />
                        <span>Father</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="radio"
                            name="guardianType"
                            value="Mother"
                            checked={registrationstep1.guardian_type === 'mother'}
                            onChange={() => handleGuardianType('mother', 4)}
                            className="text-primary focus:ring-primary mr-2"
                        />
                        <span>Mother</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="radio"
                            name="guardianType"
                            value="Brother"
                            checked={registrationstep1.guardian_type === 'brother'}
                            onChange={() => handleGuardianType('brother', 6)}
                            className="text-primary focus:ring-primary mr-2"
                        />
                        <span>Brother</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="radio"
                            name="guardianType"
                            value="Sister"
                            checked={ registrationstep1.guardian_type === 'sister'}
                            onChange={() => handleGuardianType('sister', 7)}
                            className="text-primary focus:ring-primary mr-2"
                        />
                        <span>Sister</span>
                    </label>
                </div>
            </div>

            {/* Guardian Info */}
            <div className="pb-4">
                <h3 className="font-bold mb-2">Guardian Info</h3>
                <p className="text-sm text-gray-600 mb-4">
                    We will only use this information to verify your account and will not be visible to others.
                </p>

                <div className="flex gap-6 items-center justify-center lg:justify-start">
                    {/* Guardian Picture Upload */}
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center w-40 h-52 relative">
                        {guardianImage ? (
                            <img 
                                src={guardianImage} 
                                alt="Guardian" 
                                className="w-full h-full object-cover rounded-lg"
                            />
                        ) : (
                            <>
                                <span className="text-xs text-center text-gray-500 mb-2">Add Guardian picture</span>
                                <label htmlFor="guardianImage" className="cursor-pointer absolute bottom-4">
                                    <Camera className="h-6 w-6 text-red-400" />
                                </label>
                            </>
                        )}
                        <input 
                            type="file" 
                            id="guardianImage" 
                            className="hidden" 
                            accept="image/*"
                            onChange={handleImageUpload}
                        />
                    </div>

                    {/* Verification Image */}
                    <div className="flex flex-col items-center h-52">
                        <span className="text-sm mb-2">Verification Image</span>
                        <div className="w-32 h-46 rounded-lg overflow-hidden">
                            <img 
                                src={verificationImage} 
                                alt="Verification" 
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <button className="mt-2 bg-red-400 text-white px-4 py-1 rounded-full text-sm">
                            Change
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}