<script setup lang="ts">
import type { SliderRootEmits } from 'reka-ui';
import { Slider as ShadcnSlider } from '@/components/core/slider';
import type { UiSliderProps, UiSliderEmits } from './types';

defineOptions({
  name: 'UiSlider',
});

const props = defineProps<UiSliderProps>();
const emit = defineEmits<UiSliderEmits>();

function handleModelValueUpdate(
  value: SliderRootEmits['update:modelValue'] extends [infer P] ? P : unknown,
) {
  if (Array.isArray(value) && value.every((v) => typeof v === 'number')) {
    emit('update:modelValue', value);
    return;
  }

  // reka-ui can emit undefined in some cases; keep our public API stable.
  emit('update:modelValue', []);
}
</script>

<template>
  <ShadcnSlider
    :model-value="props.modelValue"
    :default-value="props.defaultValue"
    :disabled="props.disabled"
    :orientation="props.orientation"
    :dir="props.dir"
    :inverted="props.inverted"
    :min="props.min"
    :max="props.max"
    :step="props.step"
    :min-steps-between-thumbs="props.minStepsBetweenThumbs"
    :thumb-alignment="props.thumbAlignment"
    :name="props.name"
    :required="props.required"
    @update:model-value="handleModelValueUpdate"
    @value-commit="emit('valueCommit', $event)"
  />
</template>
