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

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

export default {
    name: 'ScrollAreaHandle',
    extends: BaseScrollAreaHandle,
    inheritAttrs: false,
    inject: {
        $pcScrollArea: { default: null },
        $pcScrollAreaScrollbar: { default: null }
    },
    methods: {
        onPointerdown(event) {
            this.$pcScrollArea?.onHandlePointerDown(event, this.orientation);
        }
    },
    computed: {
        orientation() {
            return this.$pcScrollAreaScrollbar?.orientation ?? 'vertical';
        },
        isVertical() {
            return this.orientation === 'vertical';
        },
        handleStyle() {
            if (this.isVertical) {
                return {
                    height: 'var(--px-handle-height, 0px)',
                    transform: 'translate3d(0, var(--px-handle-offset, 0px), 0)'
                };
            }

            return {
                width: 'var(--px-handle-width, 0px)',
                transform: 'translate3d(var(--px-handle-offset, 0px), 0, 0)'
            };
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                'data-orientation': this.orientation,
                style: this.handleStyle,
                onPointerdown: this.onPointerdown
            };
        }
    }
};
</script>
