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

export default function PartnerMotherTongue() {
    const dispatch = useDispatch<AppDispatch>();
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const [openToAll, setOpenToAll] = useState(false);
    const [selectedLanguages, setSelectedLanguages] = useState<{id: number, name: string}[]>([]);
    
    useEffect(() => {
        if (openToAll && attributes.language_list) {
            setSelectedLanguages(attributes.language_list);
        } else if (attributes.language_list && selectedLanguages.length === attributes.language_list.length) {
            // If all languages are manually selected, also set openToAll to true
            setOpenToAll(true);
        }
    }, [openToAll, attributes.language_list, selectedLanguages.length]);
    
    useEffect(() => {
        if (selectedLanguages.length > 0) {
            // Update Redux store with selected languages as a comma-separated string for display
            const languageString = selectedLanguages.map(lang => lang.name).join(', ');
            dispatch(updateFormFields({
                ['mothertongue']: languageString
            }));
            
            // Update API with array of language IDs
            const languageIds = selectedLanguages.map(lang => lang.id);
            dispatch(updateStep3DataToAPI({
                fieldName: 'mothertongue',
                value: {
                    partner_mother_tongue: languageIds
                }
            }));
        }
    }, [selectedLanguages, dispatch]);
    
    const handleLanguageToggle = (language: {id: number, name: string}) => {
        setSelectedLanguages(prev => {
            // Check if language is already selected by ID
            const isSelected = prev.some(l => l.id === language.id);
            
            if (isSelected) {
                // Remove language if already selected
                const newLanguages = prev.filter(l => l.id !== language.id);
                // If removing a language means not all are selected, turn off openToAll
                if (attributes.language_list && newLanguages.length !== attributes.language_list.length) {
                    setOpenToAll(false);
                }
                return newLanguages;
            } 
            // Otherwise add it
            else {
                const newLanguages = [...prev, language];
                // If all languages are now selected, turn on openToAll
                if (attributes.language_list && newLanguages.length === attributes.language_list.length) {
                    setOpenToAll(true);
                }
                return newLanguages;
            }
        });
    };
    
    const handleOpenToAllToggle = () => {
        const newOpenToAll = !openToAll;
        setOpenToAll(newOpenToAll);
        
        if (newOpenToAll && attributes.language_list) {
            // Select all languages
            setSelectedLanguages([...attributes.language_list]);
        } else {
            // Deselect all languages
            setSelectedLanguages([]);
        }
    };

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

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

            {/* Open to all toggle */}
            <div className="mt-12 px-6 flex justify-between items-center">
                <span className="text-lg font-medium">Open to all</span>
                <div 
                    className={`w-12 h-6 rounded-full p-1 flex items-center cursor-pointer ${openToAll ? 'bg-primary justify-end' : 'bg-gray-300 justify-start'}`}
                    onClick={handleOpenToAllToggle}
                >
                    <div className="bg-white w-4 h-4 rounded-full shadow-md"></div>
                </div>
            </div>

            {/* Language options */}
            <div className="mt-6 px-6">
                <div className="h-[280px] overflow-y-auto">
                    {attributes.language_list && attributes.language_list.map((language) => (
                        <div 
                            key={language.id}
                            className={`py-3 border-b border-gray-100 flex items-center cursor-pointer ${
                                selectedLanguages.some(l => l.id === language.id) ? 'text-primary' : ''
                            }`}
                            onClick={() => handleLanguageToggle(language)}
                        >
                            <span className={selectedLanguages.some(l => l.id === language.id) ? 'text-primary' : ''}>{language.name}</span>
                            {selectedLanguages.some(l => l.id === language.id) && (
                                <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>
    );
}