<script setup lang="ts">
import { ref } from 'vue'
import { animate, motion, clamp, mix, useMotionValue, useTransform, useDomRef } from 'motion-v'

const props = defineProps({
  maxPull: {
    type: Number,
    default: 20
  },
  maxSquish: {
    type: Number,
    default: 0.92
  },
  maxStretch: {
    type: Number,
    default: 1.08
  },
  keyboardStep: {
    type: Number,
    default: 0.05
  },
  keyboardSpring: {
    type: Object,
    default: () => ({ stiffness: 200, damping: 60 })
  }
})

const sliderRef = useDomRef()
const initialDragY = ref(0)
const initialProgressY = ref(0)
const size = ref({ top: 0, bottom: 0 })

/**
 * The progress of the slider, normalized between 0 and 1. During the gesture
 * this can exceed 1 or go below 0, and then we animate it back to the closest
 * edge when the gesture ends.
 */
const progress = useMotionValue(0.5)

/**
 * The brightness of the slider, which is the progress clamped between 0 and 1.
 */
const brightness = useTransform(() => clamp(0, 1, progress.get()))

/**
 * Use useTransform to map the progress to the y-offset of the slider, and
 * then map that y value to squish/squash scale values.
 */
const y = useTransform(progress, [-1, 0, 1, 2], [props.maxPull, 0, 0, -props.maxPull])
const scaleX = useTransform(
  y,
  [-props.maxPull, 0, 0, props.maxPull],
  [props.maxSquish, 1, 1, props.maxSquish]
)
const scaleY = useTransform(
  y,
  [-props.maxPull, 0, 0, props.maxPull],
  [props.maxStretch, 1, 1, props.maxStretch]
)

/**
 * Invert the container scale values to insure the sun icon
 * maintains the correct aspect ratio.
 */
const invertScaleX = useTransform(() => invertScale(scaleX.get()))
const invertScaleY = useTransform(() => invertScale(scaleY.get()))

const updateProgress = (clientY) => {
  const { top, bottom } = size.value
  progress.set(calcProgress(bottom, top, clientY))
}

const updateProgressWithKeyboard = (event) => {
  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return

  let current = clamp(0, 1, progress.get())

  if (current <= 0.04) current = 0
  if (current >= 0.96) current = 1

  const newProgress =
    current + (event.key === "ArrowUp" ? props.keyboardStep : -props.keyboardStep)

  if (newProgress > 1) {
    animate(progress, 1, {
      velocity: 20,
      type: "spring",
      ...props.keyboardSpring,
    })
  } else if (newProgress < 0) {
    animate(progress, 0, {
      velocity: -20,
      type: "spring",
      ...props.keyboardSpring,
    })
  } else {
    progress.set(clamp(0, 1, newProgress))
  }
}

const handleTapStart = (event) => {
  if (!sliderRef.value) return

  const { top, bottom } = sliderRef.value.getBoundingClientRect()
  size.value = { top, bottom }

  initialDragY.value = event.clientY
  initialProgressY.value = mix(bottom, top, progress.get())
}

const handlePan = (event) => {
  const dragOffset = event.clientY - initialDragY.value
  const newProgressY = initialProgressY.value + dragOffset
  updateProgress(newProgressY)
}

const handlePanEnd = () => {
  /**
   * If the slider ended outside of the normal range,
   * animate it back to the closest edge.
   */
  const finalProgress = progress.get()
  if (finalProgress < 0) {
    animate(progress, 0)
  } else if (finalProgress > 1) {
    animate(progress, 1)
  }
}

const handleFocus = () => {
  document.addEventListener("keydown", updateProgressWithKeyboard)
}

const handleBlur = () => {
  document.removeEventListener("keydown", updateProgressWithKeyboard)
}

/**
 * ==============   Utils   ================
 */
function invertScale(scale) {
  return 1 / scale
}

function calcProgress(min, max, value) {
  return (value - min) / (max - min)
}
</script>

<template>
  <div class="container">
    <motion.div ref="sliderRef" class="slider" :style="{ y, scaleX, scaleY }" @press-start="handleTapStart"
      @pan="handlePan" @pan-end="handlePanEnd" @focus="handleFocus" @blur="handleBlur" tabindex="0"
      :initial="{ boxShadow: '0px 0px 0px 4px #0d63f800' }" :while-focus="{ boxShadow: '0px 0px 0px 4px #0d63f8ff' }"
      :transition="{ duration: 0.15 }">
      <motion.div class="indicator" :style="{ scaleY: brightness }" />
      <motion.div :style="{ scaleX: invertScaleX, scaleY: invertScaleY }">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#101417"
          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
          <circle cx="12" cy="12" r="4" stroke="#101417" fill="#101417" />
          <path d="M12 3v1" />
          <path d="M12 20v1" />
          <path d="M3 12h1" />
          <path d="M20 12h1" />
          <path d="m18.364 5.636-.707.707" />
          <path d="m6.343 17.657-.707.707" />
          <path d="m5.636 5.636.707.707" />
          <path d="m17.657 17.657.707.707" />
        </svg>
      </motion.div>
    </motion.div>
  </div>
</template>


<style>
.container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.slider {
  width: 100px;
  height: 225px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  touch-action: none;
  outline: none;
}

.indicator {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #f5f5f5;
  transform-origin: center bottom;
  pointer-events: none;
}

.icon {
  position: relative;
  z-index: 1;
  bottom: 20px;
  pointer-events: none;
}
</style>