<template>
    <template v-if="shouldRender">
        <component v-if="!asChild" :is="as" :class="cx('root')" :style="sx('root')" v-bind="attrs">
            <slot />
        </component>
        <slot v-else :class="cx('root')" :a11yAttrs="a11yAttrs" />
    </template>
</template>

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

export default {
    name: 'ScrollAreaCorner',
    extends: BaseScrollAreaCorner,
    inheritAttrs: false,
    inject: ['$pcScrollArea'],
    computed: {
        shouldRender() {
            const sa = this.$pcScrollArea;

            if (!sa) return false;

            const meta = sa.scrollMeta;

            return !meta.hiddenX && !meta.hiddenY;
        },
        cornerStyle() {
            return {
                width: 'var(--px-corner-width)',
                height: 'var(--px-corner-height)'
            };
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                style: this.cornerStyle
            };
        }
    }
};
</script>
