<template>
  <div class="single-slider-selector">
    <v-row
      no-gutters
      align="center"
      justify="space-between"
    >
      <v-col>
        <span class="text-caption">{{ label }}</span>
      </v-col>
      <v-col cols="4">
        <v-text-field
          v-model="sliderValue"
          class="mt-0 pt-0"
          hide-details
          variant="outlined"
          density="compact"
          type="number"
          :append-inner-icon="prepend"
        />
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { clamp } from '@/functions/clamp';

export interface Props {
  value: number;
  loading?: boolean;
  label?: string;
  min?: number;
  max?: number;
  step?: number;
  prepend?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: 0,
  loading: false,
  label: 'Test',
  min: -99999,
  max: 99999,
  step: 1,
  prepend: '',
});

const emit = defineEmits<{
  'update:value': [number];
}>();

const sliderValue = computed({
  get(): number {
    return Math.floor(props.value);
  },
  set(value: string | number) {
    if (value) {
      const coerced = typeof value === 'number' ? value : parseInt(value);
      const val = clamp(coerced, props.min, props.max);
      emit('update:value', val);
    }
  },
});

defineExpose({ sliderValue });
</script>

<style>
.single-slider-selector
  .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
  > .v-input__control
  > .v-input__slot,
.single-slider-selector
  .v-text-field.v-text-field--enclosed
  .v-text-field__details {
  padding: 0px 8px !important;
}

.single-slider-selector
  .v-text-field--outlined.v-input--dense.v-text-field--outlined
  > .v-input__control
  > .v-input__slot {
  min-height: 32px !important;
}

.single-slider-selector .v-slider__thumb-label {
  color: black;
}
.single-slider-selector {
  margin-top: 4px;
  margin-bottom: 4px;
}
</style>
