import { FC, useRef, useEffect } from 'react'
import { MdOutlineEdit } from '@react-icons/all-files/md/MdOutlineEdit'
import { BsArrow90DegLeft } from '@react-icons/all-files/bs/BsArrow90DegLeft'
import { BsArrow90DegRight } from '@react-icons/all-files/bs/BsArrow90DegRight'
import { MdContentCopy } from '@react-icons/all-files/md/MdContentCopy'
import { AiOutlineDelete } from '@react-icons/all-files/ai/AiOutlineDelete'
import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle'
import MessageMenuItem from './MessageMenuItem';
import { IContext } from '../../../../models/IContext'
import { clickOuter } from '../../../../utils/clickOuter'

interface MessageMenuProps {
    context: IContext;
    setContext: (obj: IContext) => void;
}

const MessageMenu: FC<MessageMenuProps> = ({ context, setContext }) => {
    const menuRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if(menuRef.current) {
            return clickOuter(menuRef.current, ()=>setContext({...context, active: false}));
        }
    }, [context, setContext]);
    return (
        <>
        {context.active &&
        <div ref={menuRef} style={{left: context.x, top: context.y}} className={['bg-gray-800 rounded-sm h-auto absolute', context.y < 280 ? '' : '-translate-y-full'].join(' ')}>
            <ul className='flex flex-col'>
                <MessageMenuItem icon={<BsArrow90DegLeft/>}>Reply</MessageMenuItem>
                <MessageMenuItem icon={<MdOutlineEdit/>}>Edit</MessageMenuItem>
                <MessageMenuItem icon={<BsArrow90DegRight/>}>Resend</MessageMenuItem>
                <MessageMenuItem icon={<MdContentCopy/>}>Copy text</MessageMenuItem>
                <MessageMenuItem icon={<AiOutlineDelete/>}>Delete</MessageMenuItem>
                <MessageMenuItem icon={<AiOutlineCheckCircle/>}>Select</MessageMenuItem>
            </ul>
        </div>
        }
        </>
    )
}

export default MessageMenu;