import React from 'react';
import { cloneElement, useCallback, useState } from 'react';
import ContextMenuPane from './ContextMenuPane';

export interface ContextMenuProps {
    items?: any,
    children?: any,
    data?: any,
}

export default function ContextMenu(props: ContextMenuProps) {
    const { children, items, data } = props;
    if (Array.isArray(children)) throw Error('ContextMenu should has only one child！');

    const [ visible, setVisible ] = useState(false);
    const [ pageX, setPageX ] = useState(0);
    const [ pageY, setPageY ] = useState(0);

    const handleContextMenu = useCallback((e: MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();

        const { pageX: x, pageY: y } = e;
        setPageX(x);
        setPageY(y);
        setVisible(true);
    }, []);

    const _children = cloneElement(children, {
        onContextMenu: handleContextMenu,
    });

    return (
        <>
            {_children}
            <ContextMenuPane
                items={items}
                data={data}
                visible={visible}
                onVisibleChange={setVisible}
                pageX={pageX}
                pageY={pageY}
            />
        </>
    );
}