<script setup>
    import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
    import { cn } from '@/lib/utils';
    import { reactiveOmit } from '@vueuse/core';

    const props = defineProps({
        defaultValue: { type: Array, required: false },
        modelValue: { type: [Array, null], required: false },
        disabled: { type: Boolean, required: false },
        orientation: { type: String, required: false },
        dir: { type: String, required: false },
        inverted: { type: Boolean, required: false },
        min: { type: Number, required: false },
        max: { type: Number, required: false },
        step: { type: Number, required: false },
        minStepsBetweenThumbs: { type: Number, required: false },
        thumbAlignment: { type: String, required: false },
        asChild: { type: Boolean, required: false },
        as: { type: null, required: false },
        name: { type: String, required: false },
        required: { type: Boolean, required: false },
        class: { type: null, required: false }
    });
    const emits = defineEmits(['update:modelValue', 'valueCommit']);

    const delegatedProps = reactiveOmit(props, 'class');

    const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
    <SliderRoot
        v-slot="{ modelValue }"
        data-slot="slider"
        :class="
            cn(
                'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
                props.class
            )
        "
        v-bind="forwarded">
        <SliderTrack
            data-slot="slider-track"
            class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
            <SliderRange
                data-slot="slider-range"
                class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
        </SliderTrack>

        <SliderThumb
            v-for="(_, key) in modelValue"
            :key="key"
            data-slot="slider-thumb"
            class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
    </SliderRoot>
</template>
