<script setup>
import { motion,animate, useSpring, useTransform, useMotionTemplate,useMotionValue } from "motion-v"
import { ref, onMounted, onUnmounted, watch } from "vue"

const progress = useMockLoading()
const isLoaded = ref(false)

const leftEdge = useMotionValue("calc(50% - 2px)")
const rightEdge = useMotionValue("calc(50% + 2px)")
const topEdge = useTransform(progress, [0, 1], ["50%", "0%"])
const bottomEdge = useTransform(progress, [0, 1], ["50%", "100%"])

/**
 * Ideally this would be as simple as something like inset() but this would leave
 * the bit in the middle visible, whereas we want to punch out the bit in the
 * middle and leave the rest. So to fix this we create a polygon that cuts into
 * the middle with a thin line and then opens that thin line once progress is 1
 */
const clipPath = useMotionTemplate`polygon(
  0% 0%, ${leftEdge} 0%, ${leftEdge} ${topEdge}, ${leftEdge} ${bottomEdge}, ${rightEdge} ${bottomEdge}, ${rightEdge} ${topEdge}, 
  ${leftEdge} ${topEdge}, ${leftEdge} 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%
)`

progress.on("change", (latest) => {
  if (latest >= 1 && !isLoaded.value) {
    isLoaded.value = true
  }
})

watch(isLoaded, (newIsLoaded) => {
  if (!newIsLoaded) return

  const transition = {
    type: "spring",
    visualDuration: 0.5,
    bounce: 0,
  }

  animate(leftEdge, "calc(0% - 0px)", transition)
  animate(rightEdge, "calc(100% + 0px)", transition)

}, { immediate: true })

// Mock loading progress
function useMockLoading() {
  const progress = useSpring(0, { stiffness: 500, damping: 40 })
  let interval

  onMounted(() => {
    interval = setInterval(() => {
      const newProgress = progress.get() + Math.random() * 0.3

      if (newProgress >= 1) {
        progress.set(1)
        clearInterval(interval)
      } else {
        progress.set(newProgress)
      }
    }, 300)
  })

  onUnmounted(() => {
    clearInterval(interval)
  })

  return progress
}

const images = [
  {
    url: "/photos/japan-day/1.jpg",
    aspectRatio: "4 / 3",
  },
  {
    url: "/photos/japan-day/2.jpg",
    aspectRatio: "3 / 4",
  },
  {
    url: "/photos/japan-day/3.jpg",
    aspectRatio: "3 / 4",
  },
  {
    url: "/photos/japan-day/4.jpg",
    aspectRatio: "3 / 4",
  },
  {
    url: "/photos/japan-day/5.jpg",
    aspectRatio: "4 / 3",
  },
  {
    url: "/photos/japan-day/6.jpg",
    aspectRatio: "3 / 4",
  },
]
</script>

<template>
  <div class="container">
    <ul class="gallery-container">
      <li v-for="(image, i) in images" :key="image.url" class="gallery-item">
        <img
          :src="image.url"
          :alt="`Gallery item ${i + 1}`"
          :style="{
            aspectRatio: image.aspectRatio,
            height: image.aspectRatio === '4 / 3' ? '100%' : 'auto',
            width: image.aspectRatio === '3 / 4' ? '100%' : 'auto',
          }"
        />
      </li>
    </ul>
    <motion.div
      class="black-overlay"
      :animate="{ opacity: isLoaded ? 0 : 1 }"
    />
    <motion.div class="pink-overlay" :style="{ clipPath }" />
  </div>
</template>

<style>
.container {
  position: relative;
  width: 500px;
  height: 400px;
  overflow: hidden;
}

.gallery-container {
  background-color: #0b1011;
  border: 1px solid #1d2628;
  border-radius: 25px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  box-sizing: border-box;
}

.gallery-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #0f1115;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.gallery-item img {
  object-fit: cover;
}

.black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f1115;
  z-index: 10000000000;
  pointer-events: none;
}

.pink-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0088;
  z-index: 10000000001;
  pointer-events: none;
  will-change: clip-path;
}
</style>