import { defineComponent, PropType } from '@vue/composition-api';
import './index.scss';
import { fixStyle } from '../../utils/dom';

export interface Option {
    title: string;
    command?: string;
    executor: () => void;
}

export interface Props {
    top: number;
    left: number;
    width: number;
    options: Option[];
}

export const RightMenu = defineComponent({
    functional: true,
    name: 'RightMenu',
    props: {
        top: {
            required: true,
            type: Number,
        },
        left: {
            required: true,
            type: Number,
        },
        options: {
            required: true,
            type: Array as PropType<Props['options']>,
        },
    },
    render(_, { props }) {
        const { top, left, options } = props;

        return (
            <div id={'menuDom'} class={'right-menu'} style={fixStyle({ top, left })}>
                {options.map((option: Option) => (
                    <div class={'menu-option'} onClick={option.executor}>
                        <span class={'option-title'}>{option.title}</span>
                        {option.command ? (
                            <span class={'option-command'}>{option.command}</span>
                        ) : null}
                    </div>
                ))}
            </div>
        );
    },
});