<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Progress } from 'reka-ui/namespaced'
import { motion, useMotionValue, useTransform, animate,RowValue } from 'motion-v'

const progress = useMotionValue(0)
const roundedProgress = useTransform(() => Math.round(progress.get()))
const pathLength = useTransform(progress, [0, 100], [0, 1])
const strokeLinecap = useTransform(() => 
  pathLength.get() === 0 ? "none" : "round"
)
const filter = useTransform(progress, [0, 100], ["blur(10px)", "blur(0px)"])
const scale = useTransform(progress, [0, 100], [0.5, 1])
const opacity = useTransform(progress, [0, 100], [0.5, 1])

onMounted(() => {
  animate(progress, 100, { duration: 3, ease: [0.31, 0.05, 0.28, 0.85] })
})
</script>

<template>
  <div class="container">
    <Progress.Root class="root">
      <Progress.Indicator as-child>
        <div class="indicator-container">
          <svg class="indicator" viewBox="0 0 100 100">
            <motion.path
              d="M50 10 A40 40 0 1 1 50 90 A40 40 0 1 1 50 10"
              fill="none"
              stroke="var(--divider)"
              stroke-width="8"
            />
            <motion.path
              d="M50 10 A40 40 0 1 1 50 90 A40 40 0 1 1 50 10"
              fill="none"
              stroke="#0cdcf7"
              stroke-width="8"
              :stroke-linecap="strokeLinecap"
              :style="{
                pathLength,
              }"
            />
          </svg>
          <div class="input-container">
            <motion.div
              class="input"
              :style="{
                filter,
                scale,
                opacity,
                willChange: 'filter, transform, opacity'
              }"
            >
            <RowValue :value="roundedProgress"/>
            </motion.div>
          </div>
        </div>
      </Progress.Indicator>
    </Progress.Root>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.root {
  position: relative;
  width: 200px;
  height: 200px;
}

.indicator-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.indicator {
  width: 100%;
  height: 100%;
}

.input-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input {
  font-size: 64px;
  text-align: center;
  color: #0cdcf7;
}
</style>