<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" :type="as === 'BUTTON' || as === 'button' ? 'button' : undefined" v-bind="attrs">
        <slot />
    </component>
    <slot v-else :a11yAttrs="a11yAttrs" :class="cx('root')" />
</template>

<script>
import { mergeProps } from 'vue';
import BaseSidebarMenuButton from './BaseSidebarMenuButton.vue';

export default {
    name: 'SidebarMenuButton',
    extends: BaseSidebarMenuButton,
    inheritAttrs: false,
    inject: {
        $pcSidebar: { default: null },
        $pcSidebarMenuItem: { default: null }
    },
    computed: {
        triggerAttrs() {
            const item = this.$pcSidebarMenuItem;

            if (!item?.collapsible) return {};

            return {
                'aria-expanded': item.d_open ? 'true' : 'false',
                'data-state': item.d_open ? 'expanded' : 'collapsed',
                onClick: item.toggle
            };
        },
        a11yAttrs() {
            return {
                ...this.triggerAttrs,
                'data-pc-name': 'sidebarmenubutton',
                'data-pc-section': 'root',
                'data-active': this.isActive ? 'true' : undefined
            };
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        }
    }
};
</script>
