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

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

export default {
    name: 'CompareIndicator',
    extends: BaseCompareIndicator,
    inheritAttrs: false,
    inject: ['$pcCompare'],
    methods: {
        getInputAttrs() {
            const compare = this.$pcCompare;

            if (!compare) return {};

            return {
                name: compare.name,
                type: 'range',
                min: compare.min,
                max: compare.max,
                step: compare.step,
                value: compare.d_value,
                disabled: compare.disabled,
                readonly: compare.readonly,
                tabindex: compare.disabled ? -1 : (compare.tabindex ?? 0),
                'aria-valuemin': compare.min,
                'aria-valuemax': compare.max,
                'aria-valuenow': compare.d_value,
                'aria-orientation': compare.orientation,
                'aria-readonly': compare.readonly ? 'true' : undefined,
                'aria-labelledby': compare.ariaLabelledby,
                'aria-label': compare.ariaLabel,
                onInput: compare.onInputInput,
                onChange: compare.onInputChange,
                onFocus: compare.onInputFocus,
                onBlur: compare.onInputBlur
            };
        }
    },
    computed: {
        attrs() {
            return mergeProps(this.a11yAttrs, this.$pcCompare?.ptm('indicator'), this.ptmi('root'));
        },
        a11yAttrs() {
            const compare = this.$pcCompare;

            if (!compare) return {};

            return {
                'data-pc-section': 'root',
                'data-orientation': compare.orientation,
                'data-disabled': compare.disabled ? '' : undefined,
                'data-invalid': compare.invalid ? '' : undefined,
                'data-dragging': compare.isDragging ? '' : undefined
            };
        },
        inputAttrs() {
            return mergeProps({ id: this.inputId, style: this.inputStyle }, this.$pcCompare?.ptm('input') || {}, this.getInputAttrs());
        },
        inputClassValue() {
            return cn(this.$pcCompare?.cx('input'), this.inputClass);
        }
    }
};
</script>
