import React, { useEffect, useState } from 'react'
import { IoCheckmark } from 'react-icons/io5';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { useSelector } from 'react-redux';
import { RootState } from '../../../../store/store';


interface SelectedRecipientsIntr {
    id: number;
    firstName: string;
    lastName: string;
    color: string;
}

interface RecipientsAttrConIntr {
    selectedRecipientId: number;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
}

const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientId, handlePropertyChange }) => {

    const [selectedRecipient, setSelectedRecipient] = useState(null);

    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
    const [dropDownToggle, setDropDownToggle] = useState(false);

    useEffect(() => {
        if (selectedRecipients.length) {
            const filter = selectedRecipients.filter((obj, indx) => obj.id == selectedRecipientId)
            setSelectedRecipient(filter[0]);
        }
    }, [selectedRecipientId])


    if (!selectedRecipient) {
        return (
            <>

            </>
        )
    }


    return (
        <>
            <div className='relative'
                tabIndex={0}
                onBlur={() => setDropDownToggle(false)}>
                {/* Selected Recipient */}
                <div
                    onClick={() => setDropDownToggle(!dropDownToggle)}
                    className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
                    <div className='flex items-center gap-1.5'>
                        <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
                        {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
                        <p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
                    </div>
                    <MdKeyboardArrowDown />
                </div>

                <div
                    className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                    {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
                        return (<div
                            key={indx}
                            className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
                            onClick={() => {
                             handlePropertyChange('recipientId', recipient.id);
                                setTimeout(() => {
                                    setDropDownToggle(false);
                                }, 0)
                            }}
                        >
                            <div className='flex items-center gap-1.5'>
                                <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
                                {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
                                <p>{recipient.firstName} {recipient.lastName} </p>
                            </div>
                            {selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
                        </div>)
                    })}
                </div>
            </div>
        </>
    )
}

export default RecipientsAttrCon