<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMotionValue, useSpring, useVelocity } from 'motion-v'
import { AnimateNumber } from 'motion-plus-vue'
import { Slider } from 'reka-ui/namespaced';

const props = defineProps({
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  initialValue: {
    type: Number,
    default: 50
  }
})

const value = ref([props.initialValue])
const scaled = useMotionValue(scale(value.value[0]))
const velocity = useVelocity(scaled)
const rotate = useSpring(velocity)

watch(value, () => {
  scaled.set(scale(value.value[0]))
})

/**
 * ==============   Utils   ================
 */

function scale(value, scaleBy = -0.1) {
  return value * scaleBy
}
</script>

<template>
  <form>
    <Slider.Root 
      :defaultValue="[50]"
      v-model="value" 
      :min="min" 
      :max="max" 
      :step="1" 
      class="slider"
    >
      <Slider.Track class="track">
        <Slider.Range class="range" />
      </Slider.Track>
      <Slider.Thumb 
        class="thumb" 
        aria-label="Volume"
      >
        <div class="thumb-text-container">
          <AnimateNumber
            :transition="{ duration: 0.2, ease: 'easeOut' }"
            locales="en-US"
            class="thumb-text"
            :style="{ originX: 0.5, originY: 1.5, rotate }"
            :value="value[0]"
          />
        </div>
      </Slider.Thumb>
    </Slider.Root>
  </form>
</template>

<style>
.slider {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none;
  width: 200px;
  height: 20px;
}

.track {
  background-color: #1d2628;
  position: relative;
  flex-grow: 1;
  border-radius: 9999px;
  height: 3px;
}

.range {
  position: absolute;
  background-color: #f5f5f5;
  border-radius: 9999px;
  height: 100%;
}

.thumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  position: absolute;
}
    
.thumb:focus {
  outline: none;
  box-shadow: 0 0 0 2px #9911ff;
}

.thumb-text-container {
  position: absolute;
  top: calc(-100% - 12px);
  left: 50%;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-text {
  background-color: #9911ff;
  color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 4px;
}
</style>