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

<script>
import { cn } from '@primeuix/utils';
import { mergeProps } from 'vue';
import BaseInputColorAreaHandle from './BaseInputColorAreaHandle.vue';

export default {
    name: 'InputColorAreaHandle',
    extends: BaseInputColorAreaHandle,
    inheritAttrs: false,
    inject: ['$pcInputColor'],
    computed: {
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            const { xChannel, yChannel } = this.$pcInputColor.areaAxes;
            const areaColor = this.$pcInputColor.areaColor;
            const xValue = areaColor.getChannelValue(xChannel);
            const yValue = areaColor.getChannelValue(yChannel);
            const xRange = areaColor.getChannelRange(xChannel);

            return {
                role: 'slider',
                tabindex: this.$pcInputColor.disabled ? -1 : 0,
                'aria-disabled': this.$pcInputColor.disabled || undefined,
                'aria-roledescription': '2d slider',
                'aria-label': `${xChannel} and ${yChannel}`,
                'aria-valuemin': xRange.min,
                'aria-valuemax': xRange.max,
                'aria-valuenow': xValue,
                'aria-valuetext': `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
                'data-p': this.dataP,
                onKeydown: this.$pcInputColor.onAreaKeyDown,
                onBlur: this.$pcInputColor.onAreaBlur
            };
        },
        dataP() {
            return cn({
                disabled: this.$pcInputColor.disabled,
                dragging: this.$pcInputColor.isAreaDragging
            });
        }
    }
};
</script>
