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

const props = defineProps({
  src: {
    type: String,
    default: '/photos/japan-day/7.jpg'
  },
  step: {
    type: Number,
    default: 50
  }
})

const containerRef = useDomRef()
const x = useMotionValue(0)
const boundary = ref(300)

// Make the input range reactive with computed to update when boundary changes
const inputRange = computed(() => [-boundary.value, boundary.value])

const clipPath = useTransform(
  x,
  inputRange as any,
  ["inset(0% 0% 0% 0%)", "inset(0% 0% 0% 100%)"]
)

const lineBackgroundColor = useSliderColor(x, boundary)

onMounted(() => {
  if (containerRef.value) {
    boundary.value = containerRef.value.clientWidth / 2
  }
})

const keyboard = useKeyboard(x, boundary, props.step)

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

function useSliderColor(x, boundary) {
  return useTransform(
    x,
    computed(() => [-boundary.value + 20, -boundary.value + 60, boundary.value - 60, boundary.value - 20]) as any,
    [
      "rgba(255, 255, 255, 0)",
      "rgba(255, 255, 255, 1)",
      "rgba(255, 255, 255, 1)",
      "rgba(255, 255, 255, 0)",
    ]
  )
}

function useKeyboard(x, boundary, step) {
  const handleKeyDown = (event) => {
    let moveBy = 0

    if (event.key === "ArrowLeft") {
      moveBy = -step
    } else if (event.key === "ArrowRight") {
      moveBy = step
    } else {
      return
    }

    animate(x, clamp(-boundary.value, boundary.value, x.get() + moveBy), {
      type: "spring",
      stiffness: 900,
      damping: 40,
      velocity: moveBy * 10,
    })
  }

  const start = () => {
    document.addEventListener("keydown", handleKeyDown)
  }

  const stop = () => {
    document.removeEventListener("keydown", handleKeyDown)
  }

  return { start, stop }
}
</script>

<template>
  <div ref="containerRef" class="container">
    <div class="image-container">
      <motion.img :src="src" alt="Kirby photo" class="image" />
      <motion.img
        :style="{ clipPath }"
        :src="src"
        alt="Kirby photo in black and white"
        class="image overlay"
      />
    </div>

    <motion.div
      class="slider"
      drag="x"
      :drag-elastic="0.05"
      :drag-constraints="containerRef"
      :style="{ x, backgroundColor: lineBackgroundColor }"
      tabindex="0"
      @focus="keyboard.start"
      @blur="keyboard.stop"
    >
      <div class="handle">
        <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="m18 8 4 4-4 4" />
          <path d="m6 8-4 4 4 4" />
          <path d="M8 12h.01" />
          <path d="M12 12h.01" />
          <path d="M16 12h.01" />
        </svg>
      </div>
    </motion.div>
  </div>
</template>

<style>
.container {
  position: relative;
}

.image-container {
  position: relative;
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  height: 300px;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  top: 0;
  left: 0;
  filter: grayscale(100%);
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: white;
  cursor: grab;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(2px 0 3px rgba(0, 0, 0, .4))
}

.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f1115;
  cursor: grab;
}

.slider:focus-visible{
  outline: none; 
}
  
.slider:focus-visible .handle {
  outline: 4px solid #ff0088; 
  outline-offset: 2px;
}

.handle:active {
  cursor: grabbing;
}
</style>