import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import { useDispatch } from 'react-redux';
import { updateFormFields, updateStep3DataToAPI } from '../../app/reducers/registrationstep3';
import { AppDispatch } from '../../app/store';

export default function PartnerAge() {
    const dispatch = useDispatch<AppDispatch>();
    const [ageRange, setAgeRange] = useState({
        from: 0,
        to: 0
      });
      
      const ageOptions = Array.from({ length: 43 }, (_, i) => (i + 18));
      
      const handleAgeChange = (type: 'from' | 'to', value: number) => {
        const newAgeRange = { ...ageRange, [type]: value };
        setAgeRange(newAgeRange);
      
        // If both values are selected, update as a string like "18 to 30"
        if (newAgeRange.from && newAgeRange.to) {
          const formatted = `${newAgeRange.from} to ${newAgeRange.to}`;
          dispatch(updateFormFields({
            ['age']: formatted
          }));

          dispatch(updateStep3DataToAPI({ fieldName: 'age', value: {age_from: newAgeRange.from, age_to:newAgeRange.to} }));
        }
      };
      

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

            {/* Title */}
            <div className="mt-6 px-6">
                <h1 className="text-2xl font-bold text-center">Partner's age</h1>
            </div>

            {/* Age range selectors */}
            <div className="mt-16 px-6">
                <div className="flex justify-between">
                    <div className="w-[48%]">
                        <label className="block text-lg font-medium mb-2">From</label>
                        <div className="relative">
                            <select 
                                value={ageRange.from}
                                onChange={(e) => handleAgeChange('from', parseInt(e.target.value))}
                                className="w-full p-3 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-primary"
                            >
                                <option value="">Select</option>
                                {ageOptions.map((age) => (
                                    <option key={`from-${age}`} value={age}>{age}</option>
                                ))}
                            </select>
                            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                                <ChevronDown size={20} className="text-gray-500" />
                            </div>
                        </div>
                    </div>
                    
                    <div className="w-[48%]">
                        <label className="block text-lg font-medium mb-2">To</label>
                        <div className="relative">
                            <select 
                                value={ageRange.to}
                                onChange={(e) => handleAgeChange('to', parseInt(e.target.value))}
                                className="w-full p-3 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-1 focus:ring-primary"
                            >
                                <option value="">Select</option>
                                {ageOptions.map((age) => (
                                    <option key={`to-${age}`} value={age}>{age}</option>
                                ))}
                            </select>
                            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                                <ChevronDown size={20} className="text-gray-500" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}