<template>
    <template v-for="(item, i) of items" :key="itemId(item, i)">
        <li v-if="item.separator && visible(item)" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')" />

        <template v-else-if="item.items && visible(item) && !toggleable(item)">
            <li :id="itemId(item, i)" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
                <component v-if="templates && templates.submenulabel" :is="templates.submenulabel" :item="item" />
                <template v-else>{{ label(item) }}</template>
            </li>
            <MenuSub
                :items="item.items"
                :depth="depth + 1"
                :parentId="itemId(item, i)"
                :templates="templates"
                :focusedOptionId="focusedOptionId"
                :unstyled="unstyled"
                @item-click="$emit('item-click', $event)"
                @item-mousemove="$emit('item-mousemove', $event)"
                :pt="pt"
            />
        </template>

        <Menuitem
            v-else-if="visible(item) && !item.separator"
            :id="itemId(item, i)"
            :item="item"
            :index="i"
            :templates="templates"
            :focusedOptionId="focusedOptionId"
            :toggleable="!!item.items && toggleable(item)"
            :expanded="expanded(item, i)"
            :depth="depth"
            :unstyled="unstyled"
            @item-click="$emit('item-click', $event)"
            @item-mousemove="$emit('item-mousemove', $event)"
            :pt="pt"
        >
            <template v-if="!!item.items && toggleable(item)" #submenu>
                <MenuSub
                    :items="item.items"
                    :depth="depth + 1"
                    :parentId="itemId(item, i)"
                    :templates="templates"
                    :focusedOptionId="focusedOptionId"
                    :unstyled="unstyled"
                    @item-click="$emit('item-click', $event)"
                    @item-mousemove="$emit('item-mousemove', $event)"
                    :pt="pt"
                />
            </template>
        </Menuitem>
    </template>
</template>

<script>
import BaseComponent from '@primevue/core/basecomponent';
import Menuitem from './Menuitem.vue';

export default {
    name: 'MenuSub',
    hostName: 'Menu',
    extends: BaseComponent,
    inheritAttrs: false,
    emits: ['item-click', 'item-mousemove'],
    inject: {
        $pcMenu: { default: null }
    },
    props: {
        items: {
            type: Array,
            default: null
        },
        depth: {
            type: Number,
            default: 0
        },
        parentId: {
            type: String,
            default: null
        },
        templates: {
            type: Object,
            default: null
        },
        focusedOptionId: {
            type: String,
            default: null
        }
    },
    methods: {
        itemId(item, i) {
            return item?.key != null ? String(item.key) : `${this.parentId}_${i}`;
        },
        toggleable(item) {
            return !!this.$pcMenu?.isItemToggleable(item, this.depth);
        },
        expanded(item, i) {
            if (!this.toggleable(item)) return true;

            return !!this.$pcMenu?.isSubmenuExpanded(this.itemId(item, i));
        },
        label(item) {
            return this.$pcMenu?.label(item);
        },
        visible(item) {
            return !!this.$pcMenu?.visible(item);
        }
    },
    components: {
        Menuitem
    }
};
</script>
