import AdminContextMenu from './admin-context-menu';
import AuthorContextMenu from './author-context-menu';
import NotAuthorContextMenu from './not-author-context-menu';
import {Comment, useAppContext} from '../../../app-context';
import {useEffect, useRef} from 'react';
import {useOutOfViewportClasses} from '../../../utils/hooks';

type Props = {
    comment: Comment;
    close: () => void;
    toggleEdit: () => void;
};
const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
    const {member, isAdmin} = useAppContext();
    const isAuthor = member && comment.member?.uuid === member?.uuid;
    const element = useRef<HTMLDivElement>(null);
    const innerElement = useRef<HTMLDivElement>(null);

    // By default display dropdown below but move above if that renders off-screen
    useOutOfViewportClasses(innerElement, {
        bottom: {
            default: 'top-0',
            outOfViewport: 'bottom-full mb-6'
        }
    });

    useEffect(() => {
        const listener = () => {
            close();
        };

        // We need to listen for the window outside the iframe, and also the iframe window events
        window.addEventListener('click', listener, {passive: true});
        const el = element.current?.ownerDocument?.defaultView;

        if (el && el !== window) {
            el.addEventListener('click', listener, {passive: true});
        }

        return () => {
            window.removeEventListener('click', listener);
            if (el && el !== window) {
                el.removeEventListener('click', listener);
            }
        };
    }, [close]);

    useEffect(() => {
        const listener = (event: KeyboardEvent) => {
            if (event.key === 'Escape') {
                close();
            }
        };
        // For keydown, we only need to listen to the main window, because we pass the events
        // manually in the Iframe component
        window.addEventListener('keydown', listener, {passive: true});

        return () => {
            window.removeEventListener('keydown', listener);
        };
    }, [close]);

    // Prevent closing the context menu when clicking inside of it
    const stopPropagation = (event: React.SyntheticEvent) => {
        event.stopPropagation();
    };

    const menuClassName = 'absolute z-10 w-52 rounded-lg bg-white p-1 font-sans text-sm shadow-lg outline-0 dark:bg-neutral-800 dark:text-white';

    let contextMenu = null;
    if (comment.status === 'published') {
        if (isAdmin) {
            contextMenu = <AdminContextMenu close={close} comment={comment} showAuthorActions={!!isAuthor} toggleEdit={toggleEdit}/>;
        } else if (isAuthor) {
            contextMenu = <AuthorContextMenu close={close} comment={comment} toggleEdit={toggleEdit} />;
        } else {
            contextMenu = <NotAuthorContextMenu close={close} comment={comment}/>;
        }
    } else {
        if (isAdmin) {
            contextMenu = <AdminContextMenu close={close} comment={comment}/>;
        } else {
            return null;
        }
    }

    return (
        <div ref={element} className="relative" data-testid="comment-context-menu" onClick={stopPropagation}>
            <div ref={innerElement} className={menuClassName} data-testid="comment-context-menu-inner">
                {contextMenu}
            </div>
        </div>
    );
};

export default CommentContextMenu;
