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

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: #0b1011;
          border: 1px solid #1d2628;
          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;
          touch-action: none;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
        }

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

        @media (max-width: 600px) {
          .gallery-container {
            width: calc(100% - 40px);
            height: 300px;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
          }
          
          .gallery-item:nth-child(5),
          .gallery-item:nth-child(6) {
            display: none;
          }
        }

        .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>