<template>
  <v-slider
    :style="`--thumbBackgroundColor: ${bgColor}`"
    v-model="sliderValue"
    :thumb-label="showThumb"
    :min="min"
    :max="max"
    direction="horizontal"
    thumb-color="blue"
    :thumb-size="16"
    hide-details
    data-testid="slider"
  >
    <template #append>
      <div class="text-white py-1 my-0 text-center" data-testid="max-value">{{ max }}</div>
    </template>
    <template #prepend>
      <div class="text-white py-1 my-0 text-center" data-testid="min-value">{{ min }}</div>
    </template>
    <template v-slot:thumb-label="{ modelValue }">
      <span>{{ Math.floor(modelValue) }}</span>
    </template>
  </v-slider>
</template>

<script setup lang="ts">
import { computed, ref, unref, watch } from 'vue';

export interface Props {
  value: number;
  loading?: boolean;
  label?: string;
  lower?: number;
  upper?: number;
  min?: number;
  max?: number;
  bgColor?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: 0,
  loading: false,
  label: 'Test',
  lower: 0,
  upper: 100,
  min: -99999,
  max: 99999,
  bgColor: '#F7F7F8'
});

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

const showThumb = ref<'always' | boolean>(true);
const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);

const sliderValue = computed({
  get() {
    return Math.floor(props.value);
  },
  set(value: number) {
    emit('update:value', Math.floor(value));
  }
});

watch(
  () => sliderValue.value,
  () => {
    clearTimeout(unref(showThumbTimeout));
    showThumb.value = 'always';
    showThumbTimeout.value = setTimeout(() => {
      showThumb.value = false;
    }, 1000);
  }
);
defineExpose({
  showThumb
});
</script>
