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

export default function Income() {
    const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    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(updateFieldAndSaveToAPI({ fieldName: 'income', value: { income: income } }));
    };

    return (
        <div className="flex flex-col bg-white">
            {/* Income icon */}
            <div className="flex justify-center mt-4">
                <div className="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">Select your monthly income</h1>
            </div>

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