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

export default function PartnerIncome() {
    const registrationstep3 = useSelector((state: RootState) => state.registrationstep3);
    const dispatch = useDispatch<AppDispatch>();
    
    const incomeRanges = [
        'Not Applicable',
        'Open to all',
        'Up to 25000',
        'BDT 25000 - 50000',
        'BDT 50000 - 100000',
        'BDT 100000 - 300000',
        'BDT 300000 - 500000',
        'BDT 500000 - 1000000',
        'BDT 1000000 Above',
        'Preferred not to say'
    ];
    
    const handleIncomeSelect = (income: string) => {
        dispatch(updateFormFields({
            ['income']: income
        }));
        
        dispatch(updateStep3DataToAPI({
            fieldName: 'income',
            value: {income: income}
        }));
    };

    return (
        <div className="flex flex-col bg-white">
            {/* Income 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/income.png" 
                        alt="Income" 
                        className="w-32 h-32"
                    />
                </div>
            </div>

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

            {/* Income range options - scrollable */}
            <div className="mt-6 px-6">
                <div className="h-[300px] overflow-y-auto">
                    {incomeRanges.map((income) => (
                        <div 
                            key={income}
                            className={`py-3 border-b border-gray-100 flex items-center cursor-pointer ${
                                registrationstep3.formFields.income.value === income ? 'text-primary' : ''
                            }`}
                            onClick={() => handleIncomeSelect(income)}
                        >
                            <span className={registrationstep3.formFields.income.value === income ? 'text-primary' : ''}>{income}</span>
                            {registrationstep3.formFields.income.value === income && (
                                <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>
    );
}