<template>
    <transition name="p-overlay-mask" appear>
        <component v-if="visible && !asChild" :is="as" :class="cx('root')" v-bind="attrs" @click="onClick">
            <slot />
        </component>
        <slot v-else-if="visible && asChild" :a11yAttrs="a11yAttrs" :class="cx('root')" :onClick="onClick" />
    </transition>
</template>

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

export default {
    name: 'SidebarBackdrop',
    extends: BaseSidebarBackdrop,
    inheritAttrs: false,
    inject: {
        $pcSidebarLayout: { default: null }
    },
    methods: {
        onClick(event) {
            this.$pcSidebarLayout?.collapseSidebar(event);
        }
    },
    computed: {
        visible() {
            return !!this.$pcSidebarLayout?.isAnySidebarOpen?.();
        },
        a11yAttrs() {
            return {
                'data-pc-name': 'sidebarbackdrop',
                'data-pc-section': 'root',
                'data-state': this.visible ? 'expanded' : 'collapsed'
            };
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        }
    }
};
</script>
