import { computed, defineComponent, h, inject } from 'vue';
import { ChevronDownFilledIcon } from '../../_internal/icons';
import { render } from '../../_utils';
import { NBaseIcon } from '../../_internal';
import { menuInjectionKey } from './Menu';
export default defineComponent({
    name: 'MenuOptionContent',
    props: {
        collapsed: Boolean,
        disabled: Boolean,
        title: [String, Function],
        icon: Function,
        extra: [String, Function],
        showArrow: Boolean,
        childActive: Boolean,
        hover: Boolean,
        paddingLeft: Number,
        maxIconSize: {
            type: Number,
            required: true
        },
        activeIconSize: {
            type: Number,
            required: true
        },
        iconMarginRight: {
            type: Number,
            required: true
        },
        clsPrefix: {
            type: String,
            required: true
        },
        onClick: Function,
        tmNode: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const { props: menuProps } = inject(menuInjectionKey);
        return {
            menuProps,
            style: computed(() => {
                const { paddingLeft } = props;
                return { paddingLeft: paddingLeft && `${paddingLeft}px` };
            }),
            iconStyle: computed(() => {
                const { maxIconSize, activeIconSize, iconMarginRight } = props;
                return {
                    width: `${maxIconSize}px`,
                    height: `${maxIconSize}px`,
                    fontSize: `${activeIconSize}px`,
                    marginRight: `${iconMarginRight}px`
                };
            })
        };
    },
    render() {
        const { clsPrefix, tmNode, menuProps: { renderIcon, renderLabel, expandIcon } } = this;
        return (h("div", { onClick: this.onClick, role: "none", class: [
                `${clsPrefix}-menu-item-content`,
                {
                    [`${clsPrefix}-menu-item-content--collapsed`]: this.collapsed,
                    [`${clsPrefix}-menu-item-content--child-active`]: this.childActive,
                    [`${clsPrefix}-menu-item-content--disabled`]: this.disabled,
                    [`${clsPrefix}-menu-item-content--hover`]: this.hover
                }
            ], style: this.style },
            renderIcon || this.icon ? (h("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, renderIcon ? renderIcon(tmNode.rawNode) : render(this.icon))) : null,
            h("div", { class: `${clsPrefix}-menu-item-content-header`, role: "none" },
                renderLabel ? renderLabel(tmNode.rawNode) : render(this.title),
                this.extra ? (h("span", { class: `${clsPrefix}-menu-item-content-header__extra` },
                    ' ',
                    render(this.extra))) : null),
            this.showArrow ? (h(NBaseIcon, { ariaHidden: true, class: `${clsPrefix}-menu-item-content__arrow`, clsPrefix: clsPrefix }, {
                default: () => expandIcon ? expandIcon(tmNode.rawNode) : h(ChevronDownFilledIcon, null)
            })) : null));
    }
});
