<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref, watch,defineComponent, Ref } from 'vue'
import { AnimatePresence, MotionConfig, motion,useMotionValue } from 'motion-v'

interface Image {
    url: string
    aspectRatio: string
}
const baseZIndex = 2000
const zStack = ["overlay", "thumbnail", "image"]

const index = ref<number | false>(false)
function setIndex(i: number | false) {
  index.value = i
}
/**
 * ==============   Hooks   ================
 */

function useEscToClose(isOpen: Ref<number | false>, close: () => void) {
  watch(isOpen, (newValue) => {
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === 'Escape' && newValue !== false) {
        close()
      }
    }

    if (newValue !== false) {
      window.addEventListener('keydown', handleKeyDown)
    }
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, { immediate: true })
}
useEscToClose(index, () => setIndex(false))
const images: Image[] = [
  {
    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',
  },
]

/**
 * ==============   GalleryItem   ================
 */
 const GalleryItem = defineComponent({
  props: {
    image: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    open: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    const zIndex = useMotionValue(0)
    const activeZIndex = baseZIndex + zStack.indexOf("thumbnail")

    return () => (
      <motion.li
        class="gallery-item"
        onPress={() => {
          props.open()
          zIndex.set(activeZIndex)
        }}
        layoutId={props.image.url}
        style={{ borderRadius: '10px', zIndex }}
        onLayoutAnimationStart={() => {
          zIndex.set(activeZIndex)
        }}
        onLayoutAnimationComplete={() => {
          zIndex.set(0)
        }}
      >
        <motion.img
          layoutId={props.image.url + 'image'}
          src={props.image.url}
          alt={`Gallery item ${props.index + 1}`}
          style={{
            aspectRatio: props.image.aspectRatio,
            height: props.image.aspectRatio === '4 / 3' ? '100%' : 'auto',
            width: props.image.aspectRatio === '3 / 4' ? '100%' : 'auto',
          }}
        />
      </motion.li>
    )
  }
})

/**
 * ==============   Gallery   ================
 */
const Gallery = defineComponent({
  props: {
    items: {
      type: Array,
      required: true
    },
    setIndex: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    return () => (
      <ul class="gallery-container">
        {props.items.map((image, i) => (
          <GalleryItem
            key={i}
            image={image}
            index={i}
            open={() => props.setIndex(i)}
          />
        ))}
      </ul>
    )
  }
})

const SingleImage = defineComponent({
  props: {
    image: Object,
    onClick: Function
  },
  setup(props) {

    return () => (
      <div
        class="single-image-container"
        onClick={props.onClick}
        style={{ '--image-z-index': baseZIndex + zStack.indexOf('image') }}
      >
        <motion.div
          class="single-image"
          layoutId={props.image?.url}
          style={{
            aspectRatio: props.image?.aspectRatio,
            borderRadius: '20px',
          }}
        >
          <motion.img layoutId={props.image?.url + 'image'} src={props.image?.url} />
        </motion.div>
      </div>
    )
  }
})



/**
 * ==============   Styles   ================
 */
function Stylesheet() {
  return (
    <style>
      {`
        .gallery-container {
          background-color: var(--layer);
          border: 1px solid var(--border);
          border-radius: 25px;
          width: 500px;
          height: 400px;
          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 {
          cursor: pointer;
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
          background-color: #0f1115;
          display: flex;
          align-items: center;
          justify-content: center;
          will-change: transform, opacity;
        }

        .gallery-item:focus-visible {
          outline: 2px solid var(--accent);
          outline-offset: 2px;
        }

        .overlay {
          background: rgba(0, 0, 0, 0.6);
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          display: flex;
          pointer-events: none;
          z-index: ${baseZIndex + zStack.indexOf('overlay')};
          will-change: opacity;
        }

        .single-image-container {
          position: fixed;
          inset: 0;
          display: flex;
          justify-content: center;
          align-items: center;  
          z-index: ${baseZIndex + zStack.indexOf('image')};
        }

        .single-image {
          overflow: hidden;
          max-width: 90vw;
          max-height: 90vh;
          will-change: transform, opacity;
        }

        .single-image img {
          width: 100%;
          height: 100%;
          will-change: transform;
        }
      `}
    </style>
  )
}
</script>

<template>
  <MotionConfig :transition="{ type: 'spring', bounce: 0.1, visualDuration: 0.3 }">
    <AnimatePresence>
      <Gallery
        :items="images"
        :set-index="setIndex"
      />
      <motion.div
        v-if="index"
        key="overlay"
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="overlay"
        @click="() => setIndex(false)"
      />
    </AnimatePresence>
    <AnimatePresence :unwrap-element="true">
      <SingleImage
        v-if="index !== false"
        :image="images[index]"
        @click="() => setIndex(false)"
      />
    </AnimatePresence>
  </MotionConfig>
  <Stylesheet />
</template>