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 PartnerMaritalStatus() {
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const dispatch = useDispatch<AppDispatch>();
    
    const [openToAll, setOpenToAll] = useState(false);
    const [selectedStatuses, setSelectedStatuses] = useState<{id: number, name: string}[]>([]);
    
    useEffect(() => {
        if (openToAll && attributes.maritial_status) {
            setSelectedStatuses([...attributes.maritial_status]);
        } else if (selectedStatuses.length === attributes.maritial_status?.length) {
            // If all statuses are manually selected, also set openToAll to true
            setOpenToAll(true);
        }
    }, [openToAll, attributes.maritial_status, selectedStatuses.length]);
    
    useEffect(() => {
        // Update Redux store with selected statuses as a comma-separated string
        const statusNames = selectedStatuses.map(status => status.name);
        const statusString = statusNames.join(', ');
        
        if(statusString){
            dispatch(updateFormFields({
                ['maritalstatus']: statusString
            }));
        }
        
        // Update API with array of status IDs
        const statusIds = selectedStatuses.map(status => status.id);
        if(statusIds){
            dispatch(updateStep3DataToAPI({ 
                fieldName: 'maritalstatus', 
                value: { marital_statuses: statusIds} 
            }));
        }
    }, [selectedStatuses, dispatch]);
    
    const handleStatusToggle = (status: {id: number, name: string}) => {
        setSelectedStatuses(prev => {
            // Check if status is already selected by ID
            const isSelected = prev.some(s => s.id === status.id);
            
            if (isSelected) {
                // If status is already selected, remove it
                const newStatuses = prev.filter(s => s.id !== status.id);
                // If removing a status means not all are selected, turn off openToAll
                if (newStatuses.length !== attributes.maritial_status?.length) {
                    setOpenToAll(false);
                }
                return newStatuses;
            } else {
                // Otherwise add it
                const newStatuses = [...prev, status];
                // If all statuses are now selected, turn on openToAll
                if (newStatuses.length === attributes.maritial_status?.length) {
                    setOpenToAll(true);
                }
                return newStatuses;
            }
        });
    };
    
    const handleOpenToAllToggle = () => {
        const newOpenToAll = !openToAll;
        setOpenToAll(newOpenToAll);
        
        if (newOpenToAll && attributes.maritial_status) {
            // Select all statuses
            setSelectedStatuses([...attributes.maritial_status]);
        } else {
            // Deselect all statuses
            setSelectedStatuses([]);
        }
    };

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

            {/* Title */}
            <div className="mt-6 px-6">
                <h1 className="text-2xl font-bold text-center">Partner's marital status</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>

            {/* Marital status options */}
            <div className="mt-6 px-6 grid grid-cols-2 gap-4">
                {attributes.maritial_status && attributes.maritial_status.map((status) => (
                    <div 
                        key={status.id}
                        className={`border border-gray-300 rounded-md py-3 px-4 text-center cursor-pointer ${
                            selectedStatuses.some(s => s.id === status.id) ? 'border-primary text-primary' : ''
                        }`}
                        onClick={() => handleStatusToggle(status)}
                    >
                        {status.name}
                    </div>
                ))}
            </div>
        </div>
    );
}