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

export default function PartnerHeight() {
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const dispatch = useDispatch<AppDispatch>();
    const [heightRange, setHeightRange] = useState({
        from: {id: 0, height_range: '', value: ''},
        to: {id: 0, height_range: '', value: ''}
    });
    
    const handleHeightChange = (type: 'from' | 'to', value: ProfileAttribute) => {
        const newHeightRange = { ...heightRange, [type]: value };
        setHeightRange(newHeightRange);
        
        // If both values are selected, update as a string
        if (newHeightRange.from.id !== 0 && newHeightRange.to.id !== 0) {
            const formatted = `${newHeightRange.from.height_range} to ${newHeightRange.to.height_range}`;
            dispatch(updateFormFields({
                ['height']: formatted
            }));
            dispatch(updateStep3DataToAPI({ 
                fieldName: 'height', 
                value: {
                    'height_from': newHeightRange.from.value,
                    'height_to': newHeightRange.to.value
                } 
            }));
        }
    };

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

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

            {/* Height 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={JSON.stringify(heightRange.from)}
                                onChange={(e) => handleHeightChange('from', JSON.parse(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={JSON.stringify({id: 0, height_range: '', value: ''})}>Select</option>
                                {attributes.heights.map((height) => (
                                    <option key={`from-${height.id}`} value={JSON.stringify(height)}>
                                        {height.height_range}
                                    </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={JSON.stringify(heightRange.to)}
                                onChange={(e) => handleHeightChange('to', JSON.parse(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={JSON.stringify({id: 0, height_range: '', value: ''})}>Select</option>
                                {attributes.heights.map((height) => (
                                    <option key={`to-${height.id}`} value={JSON.stringify(height)}>
                                        {height.height_range}
                                    </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>
    );
}