<template>
    <li
        v-if="visible()"
        :id="id"
        :class="[cx('item'), item.class]"
        role="menuitem"
        :style="item.style"
        :aria-label="label()"
        :aria-disabled="disabled()"
        :aria-haspopup="toggleable ? 'true' : undefined"
        :aria-expanded="toggleable ? expanded : undefined"
        :aria-level="ariaMeta.level"
        :aria-posinset="ariaMeta.posinset"
        :aria-setsize="ariaMeta.setsize"
        :data-focused="isItemFocused()"
        :data-disabled="disabled() || false"
        :data-toggleable="toggleable || undefined"
        :data-depth="toggleable ? depth : undefined"
        :data-p="dataP"
        @click.self="onItemClick($event)"
        @mousedown="onItemMousedown($event)"
        v-bind="getPTOptions('item')"
    >
        <div :class="cx('itemContent')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" :data-p="dataP" v-bind="getPTOptions('itemContent')">
            <template v-if="!templates.item">
                <a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" v-bind="getPTOptions('itemLink')">
                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
                    <component v-else-if="isComponentIcon(item.icon)" :is="resolveIcon(item.icon)" :class="cx('itemIcon')" :data-p="dataP" v-bind="getPTOptions('itemIcon')" />
                    <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" :data-p="dataP" v-bind="getPTOptions('itemIcon')" />
                    <span :class="cx('itemLabel')" :data-p="dataP" v-bind="getPTOptions('itemLabel')">{{ label() }}</span>
                    <template v-if="toggleable">
                        <component v-if="templates && templates.submenuicon" :is="templates.submenuicon" :item="item" :class="cx('itemSubmenuIcon')" :data-expanded="expanded || undefined" />
                        <ChevronDownIcon v-else :class="cx('itemSubmenuIcon')" :data-expanded="expanded || undefined" v-bind="getPTOptions('itemSubmenuIcon')" />
                    </template>
                </a>
            </template>
            <component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :icon="item.icon ? resolveIcon(item.icon) : undefined" :props="getMenuItemProps(item)"></component>
        </div>
        <ul v-if="toggleable && expanded" :class="cx('submenuList')" role="menu" v-bind="ptm('submenuList')">
            <slot name="submenu" />
        </ul>
    </li>
</template>

<script>
import ChevronDownIcon from '@primeicons/vue/chevron-down';
import { cn } from '@primeuix/utils';
import { isString } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import Ripple from 'primevue/ripple';
import { mergeProps, toRaw } from 'vue';

export default {
    name: 'Menuitem',
    hostName: 'Menu',
    extends: BaseComponent,
    inheritAttrs: false,
    emits: ['item-click', 'item-mousemove'],
    props: {
        item: null,
        templates: null,
        id: null,
        focusedOptionId: null,
        index: null,
        toggleable: {
            type: Boolean,
            default: false
        },
        expanded: {
            type: Boolean,
            default: false
        },
        depth: {
            type: Number,
            default: 0
        }
    },
    inject: {
        $pcMenu: { default: null }
    },
    methods: {
        getPTOptions(key) {
            return this.ptm(key, {
                context: {
                    item: this.item,
                    index: this.index,
                    focused: this.isItemFocused(),
                    disabled: this.disabled()
                }
            });
        },
        isItemFocused() {
            return this.focusedOptionId === this.id;
        },
        onItemClick(event) {
            if (this.disabled()) return;

            if (this.toggleable) {
                event.preventDefault();
                this.$pcMenu?.setFocusedOptionId(this.id);
                this.$pcMenu?.focusMenuList();
                this.$pcMenu?.toggleSubmenu(this.id);

                return;
            }

            this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
        },
        onItemMouseMove(event) {
            this.$emit('item-mousemove', { originalEvent: event, item: this.item, id: this.id });
        },
        onItemMousedown(event) {
            if (this.toggleable) event.preventDefault();
        },
        visible() {
            return !!this.$pcMenu?.visible(this.item);
        },
        disabled() {
            return this.$pcMenu?.disabled(this.item);
        },
        label() {
            return this.$pcMenu?.label(this.item);
        },
        getMenuItemProps(item) {
            return {
                action: mergeProps(
                    {
                        class: this.cx('itemLink'),
                        tabindex: '-1'
                    },
                    this.getPTOptions('itemLink')
                ),
                icon: mergeProps(
                    {
                        class: [this.cx('itemIcon'), isString(item.icon) ? item.icon : undefined]
                    },
                    this.getPTOptions('itemIcon')
                ),
                label: mergeProps(
                    {
                        class: this.cx('itemLabel')
                    },
                    this.getPTOptions('itemLabel')
                )
            };
        },

        resolveIcon(icon) {
            return isString(icon) ? icon : toRaw(icon);
        },
        isComponentIcon(icon) {
            return !!icon && !isString(icon);
        }
    },
    computed: {
        dataP() {
            return cn({
                focus: this.isItemFocused(),
                disabled: this.disabled()
            });
        },
        ariaMeta() {
            return this.$pcMenu?.ariaMetaMap?.get(this.item) || {};
        }
    },
    directives: {
        ripple: Ripple
    },
    components: {
        ChevronDownIcon
    }
};
</script>
