<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref } from 'vue'
import { motion, LayoutGroup } from 'motion-v'
import { AnimateNumber } from 'motion-plus-vue'

const props = withDefaults(defineProps<{
  min?: number
  max?: number
}>(), {
  min: -Infinity,
  max: Infinity
})

const container = {
  backgroundColor: "#0e1616",
  borderRadius: '1000px',
  padding: "10px 20px",
  display: "inline-flex", 
  alignItems: "center",
  gap: '20px',
  fontFamily: `"Azeret Mono", monospace`,
}

const button = {
  backgroundColor: "#0cdcf733",
  borderRadius: '50px',
  padding: '10px',
  display: "flex",
  alignItems: "center",
  gap: '10px',
}

const buttonProps = {
  initial: {
    boxShadow: "0px 0px 0px 2px #0cdcf700",
  },
  hover: {
    scale: 1.1,
  },
  press: {
    scale: 0.9,
  },
  focus: {
    boxShadow: "0px 0px 0px 2px #0cdcf7ff",
  },
  layout: true,
  style: button,
}

const number = {
  fontSize: '48px',
  fontVariantNumeric: 'tabular-nums',
}

/**
 * ==============   Icons   ================
 */
const AdditionIcon = ({ type }: { type: "plus" | "minus" }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M5 12h14" />
    {type === "plus" && <path d="M12 5v14" />}
  </svg>
)


const value = ref(0)

const handlePointerDown = (delta: number) => {
  value.value = Math.min(Math.max(value.value + delta, props.min), props.max)
}
</script>

<template>
  <LayoutGroup>
    <motion.div :style="container" layout :data-value="value">
      <motion.button
        :disabled="props.min != null && value <= props.min"
        @pointerdown="handlePointerDown(-1)"
        v-bind="buttonProps"
      >
        <AdditionIcon type="minus" />
      </motion.button>
      <AnimateNumber :style="number" :value="value"></AnimateNumber>
      <motion.button
        :disabled="props.max != null && value >= props.max"
        @pointerdown="handlePointerDown(1)"
        v-bind="buttonProps"
      >
        <AdditionIcon type="plus" />
      </motion.button>
    </motion.div>
  </LayoutGroup>
</template>