import { useState, useEffect } from 'react';
import { Search } from 'lucide-react';
import { useDispatch, useSelector } from 'react-redux';
import { updateFormField, updateFieldAndSaveToAPI } from '../../app/reducers/registrationstep1';
import { AppDispatch, RootState } from '../../app/store';

export default function Profession() {
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    const dispatch = useDispatch<AppDispatch>();

    const [searchQuery, setSearchQuery] = useState('');
    const [filteredProfessions, setFilteredProfessions] = useState<{id: number, name: string}[]>([]);

    useEffect(() => {
        if (attributes.profession_list) {
            // Filter professions based on search query
            const filtered = attributes.profession_list.filter(profession => 
                profession.name.toLowerCase().includes(searchQuery.toLowerCase())
            );
            setFilteredProfessions(filtered);
        }
    }, [searchQuery, attributes.profession_list]);

    const handleProfessionSelect = (profession: {id: number, name: string}) => {
        dispatch(updateFormField({
            fieldName: 'profession',
            value: profession.name
        }));

        dispatch(updateFieldAndSaveToAPI({ fieldName: 'profession', value: {profession: profession.name} }));
    };

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

            {/* Title */}
            <div className="mt-6 px-6">
                <h1 className="text-2xl font-bold text-center">Select your profession</h1>
            </div>

            {/* Search bar */}
            <div className="mt-6 px-6">
                <div className="relative">
                    <input
                        type="text"
                        placeholder="Search..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full py-2 px-4 pr-10 bg-gray-100 rounded-full focus:outline-none"
                    />
                    <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <Search size={20} />
                    </div>
                </div>
            </div>

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