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

const isChecked = ref(false)
const pathLength = useMotionValue(isChecked.value ? 1 : 0)
const strokeLinecap = useTransform(() => 
  pathLength.get() === 0 ? "none" : "round"
)
strokeLinecap.on('change', (value) => {
  console.log('strokeLinecap', value)
})

const toggleChecked = () => {
  isChecked.value = !isChecked.value
}
</script>

<template>
  <div class="container">
    <Checkbox.Root class="root" as-child>
      <motion.button
        :while-hover="{ scale: 1.05 }"
        :while-press="{ scale: 0.95 }"
        @press="toggleChecked"
        data-primary-action
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="#4ff0b7"
          stroke-width="3"
        >
          <motion.path
            d="M4 12L10 18L20 6"
            :animate="{ pathLength: isChecked ? 1 : 0 }"
            :transition="{
              type: 'spring',
              bounce: 0,
              duration: isChecked ? 0.3 : 0.1,
            }"
            :stroke-linecap="strokeLinecap"
            :style="{
              pathLength,
            }"
          />
        </svg>
      </motion.button>
    </Checkbox.Root>
  </div>
</template>

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

.root {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: var(--layer);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 4px;
}

.root:focus-visible {
  outline: none;
  border-color: #4ff0b7;
}
</style>