"use client"

import {
    AnimatePresence,
    frame,
    motion,
    MotionConfig,
    useMotionValue,
} from "motion/react"
import { useEffect, useState } from "react"

const baseZIndex = 2000
const zStack = ["overlay", "thumbnail", "image"]

export default function ModalSharedLayout() {
    const [index, setIndex] = useState<number | false>(false)

    useEscToClose(index !== false, () => setIndex(false))

    return (
        <MotionConfig
            transition={{ type: "spring", bounce: 0.1, visualDuration: 0.3 }}
        >
            <Gallery items={images} setIndex={setIndex} />
            <AnimatePresence>
                {index !== false && (
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        key="overlay"
                        className="overlay"
                        onClick={() => setIndex(false)}
                    />
                )}

                {index !== false && (
                    <SingleImage
                        key="image"
                        image={images[index]}
                        onClick={() => setIndex(false)}
                    />
                )}
            </AnimatePresence>
            <Stylesheet />
        </MotionConfig>
    )
}

function GalleryItem({ image, open, i }: GalleryItemProps) {
    const zIndex = useMotionValue(0)
    const activeZIndex = baseZIndex + zStack.indexOf("thumbnail")

    return (
        <motion.li
            className="gallery-item"
            key={image.url}
            onTap={() => {
                frame.postRender(() => {
                    open()
                    zIndex.set(activeZIndex)
                })
            }}
            layoutId={image.url}
            style={{ borderRadius: 10, zIndex }}
            onLayoutAnimationStart={() => zIndex.set(activeZIndex)}
            onLayoutAnimationComplete={() => zIndex.set(0)}
        >
            <motion.img
                layoutId={image.url + "image"}
                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",
                }}
            />
        </motion.li>
    )
}

function Gallery({ items, setIndex }: GalleryProps) {
    return (
        <ul className="gallery-container">
            {items.map((image, i) => (
                <GalleryItem
                    key={image.url}
                    image={image}
                    i={i}
                    open={() => setIndex(i)}
                />
            ))}
        </ul>
    )
}

function SingleImage({ image, onClick }: SingleImageProps) {
    return (
        <div className="single-image-container" onClick={onClick}>
            <motion.div
                layoutId={image.url}
                className="single-image"
                style={{
                    aspectRatio: image.aspectRatio,
                    borderRadius: 20,
                }}
            >
                <motion.img layoutId={image.url + "image"} src={image.url} />
            </motion.div>
        </div>
    )
}

/**
 * ==============   Hooks   ================
 */

function useEscToClose(isOpen: boolean, close: () => void) {
    useEffect(() => {
        function handleKeyDown(e: KeyboardEvent) {
            if (e.key === "Escape" && isOpen) {
                close()
            }
        }

        window.addEventListener("keydown", handleKeyDown)
        return () => window.removeEventListener("keydown", handleKeyDown)
    }, [isOpen])
}

/**
 * ==============   Types   ================
 */

interface SingleImageProps {
    image: Image
    onClick: () => void
}

interface Image {
    url: string
    aspectRatio: string
}

interface GalleryProps {
    items: Image[]
    setIndex: (index: number) => void
}

interface GalleryItemProps {
    image: Image
    open: () => void
    i: number
}

/**
 * ==============   Utils   ================
 */
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",
    },
]

/**
 * ==============   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 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        @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;
          }
        }

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