import { FC } from 'react'
import { IMessage } from '../../../models/IMessage'
import { User } from '../../../models/User';
import format from 'date-fns/format';
import { BsCheckAll } from '@react-icons/all-files/bs/BsCheckAll'
import Avatar from '../../UI/Avatar';
import { IContext } from '../../../models/IContext';

interface MessageProps {
    msg: IMessage;
    user?: User;
    isMe: boolean;
    setContext: (obj: IContext) => void;
}

const Message: FC<MessageProps> = ({msg, user, isMe, setContext}) => {
    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        e.preventDefault();
        setContext({active: true, x: e.clientX, y: e.clientY, message_id: msg._id});
    }

    return (
        <div className={['flex w-1/2 mb-10', isMe ? 'self-end justify-end' : 'self-start justify-start'].join(' ')}>
            <Avatar className='-translate-y-[5px] order-2' avatar={user?.avatar}/>
            <div onContextMenu={e=> handleClick(e)} className={['shadow-md  rounded-md py-2 px-4 relative before:absolute before:border-[10px] before:border-transparent before:border-t-[10px] before:top-0', isMe ? 'bg-apricot order-1 mr-5 before:border-t-apricot before:right-0 before:translate-x-1/2' : 'bg-zinc-400 order-3 ml-5 before:zinc-t-gray-400 before:left-0 before:-translate-x-1/2'].join(' ')}>
                <h2 className='font-medium mb-1'>{user?.name}  {user?.sname}</h2>
                <p className='text-sm'>{msg.msg}</p>
                <div className="flex items-center justify-end">
                    <p className='text-xs'>{format(msg.time, 'H:mm')}</p>
                    {isMe &&
                        <span className={['ml-1 text-lg', msg.readed ? 'text-blue-600' : 'text-gray-800'].join(' ')}><BsCheckAll/></span>
                    }
                </div>
            </div>
            
        </div>
    )
}

export default Message;