"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const icons_1 = require("../../_internal/icons");
const _utils_1 = require("../../_utils");
const _internal_1 = require("../../_internal");
const Menu_1 = require("./Menu");
exports.default = vue_1.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 } = vue_1.inject(Menu_1.menuInjectionKey);
        return {
            menuProps,
            style: vue_1.computed(() => {
                const { paddingLeft } = props;
                return { paddingLeft: paddingLeft && `${paddingLeft}px` };
            }),
            iconStyle: vue_1.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 (vue_1.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 ? (vue_1.h("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, renderIcon ? renderIcon(tmNode.rawNode) : _utils_1.render(this.icon))) : null,
            vue_1.h("div", { class: `${clsPrefix}-menu-item-content-header`, role: "none" },
                renderLabel ? renderLabel(tmNode.rawNode) : _utils_1.render(this.title),
                this.extra ? (vue_1.h("span", { class: `${clsPrefix}-menu-item-content-header__extra` },
                    ' ',
                    _utils_1.render(this.extra))) : null),
            this.showArrow ? (vue_1.h(_internal_1.NBaseIcon, { ariaHidden: true, class: `${clsPrefix}-menu-item-content__arrow`, clsPrefix: clsPrefix }, {
                default: () => expandIcon ? expandIcon(tmNode.rawNode) : vue_1.h(icons_1.ChevronDownFilledIcon, null)
            })) : null));
    }
});
