"use client"

import { AnimatePresence, motion } from "motion/react"
import Image from "next/image"
import { useState } from "react"

function Card({
    id,
    title,
    category,
    open,
    top,
    bottom,
    width = "100%",
    left,
    theme,
}: CardProps) {
    return (
        <li className={`card ${theme}`} onClick={open}>
            <motion.div
                className="card-content"
                layoutId={`card-container-${id}`}
            >
                <motion.div
                    className="card-image-container"
                    layoutId={`card-image-container-${id}`}
                >
                    <motion.img
                        className="card-image"
                        src={`/photos/app-store/${id}.jpg`}
                        alt=""
                        style={{ top, bottom, width, left }}
                        layoutId={`card-image-${id}`}
                    />
                </motion.div>
                <motion.div
                    className="title-container"
                    layoutId={`title-container-${id}`}
                    layout="position"
                >
                    <span className="h6">{category}</span>
                    <h2 className="h3">{title}</h2>
                </motion.div>
            </motion.div>
        </li>
    )
}

function List({ open }: { open: (id: string) => void }) {
    return (
        <ul className="card-list">
            {items.map((card) => (
                <Card key={card.id} {...card} open={() => open(card.id)} />
            ))}
        </ul>
    )
}

function Item({ id, close }: { id: string; close: VoidFunction }) {
    const {
        category,
        title,
        content,
        top,
        bottom,
        theme,
        width = "100%",
        left,
    } = items.find((item) => item.id === id)!

    return (
        <>
            <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2, delay: 0.1 }}
                style={{ pointerEvents: "auto" }}
                className="overlay"
                onClick={close}
            />
            <div className={`card-content-container open ${theme}`}>
                <motion.div
                    className="card-content"
                    layoutId={`card-container-${id}`}
                >
                    <motion.div
                        className="card-image-container"
                        layoutId={`card-image-container-${id}`}
                    >
                        <motion.img
                            className="card-image"
                            src={`/photos/app-store/${id}.jpg`}
                            alt=""
                            style={{ top, bottom, width, left }}
                            layoutId={`card-image-${id}`}
                        />
                    </motion.div>
                    <motion.div
                        className="title-container"
                        layoutId={`title-container-${id}`}
                        layout="position"
                    >
                        <span className="h6">{category}</span>
                        <h2 className="h3">{title}</h2>
                    </motion.div>
                    <motion.div className="content-container small" animate>
                        {content}
                    </motion.div>
                </motion.div>
            </div>
        </>
    )
}

function StoreFront() {
    const [openId, open] = useState<string | null>(null)

    const close = () => open(null)

    return (
        <>
            <List open={open} />
            <AnimatePresence>
                {openId && <Item close={close} id={openId} key="item" />}
            </AnimatePresence>
        </>
    )
}

export default function AppStore() {
    return (
        <div id="app-store">
            <header>
                <div>
                    <h2 className="store-title">Today</h2>
                </div>
                <div className="avatar">
                    <Image
                        src="/authors/matt-perry.png"
                        alt="Photo of Matt Perry"
                        width={40}
                        height={40}
                    />
                </div>
            </header>
            <StoreFront />
            <StyleSheet />
        </div>
    )
}

/**
 * ==============   Styles   ================
 */

const StyleSheet = () => {
    return (
        <style>{`
            @media (max-width: 620px) {
              body {
                overflow: hidden;
              }
            }

            #app-store {
                width: 100%;
                max-width: 990px;
                display: flex;
                flex-direction: column;
                padding-top: 150px;
                padding-bottom: 150px;
            }

            #app-store,
            #app-store * {
                box-sizing: border-box;
            }

            #app-store header {
                position: relative;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            #app-store .avatar {
                background: var(--layer);
                border-radius: 50%;
                border: 1px solid var(--divider);
                width: 40px;
                height: 40px;
                overflow: hidden;
            }

            .store-title {
                font-variation-settings: "opsz" 20, "wght" 640;
                font-size: 34px;
                margin: 5px 0;
                letter-spacing: -0.05em;
                color: var(--text);
            }

            .date {
                color: var(--feint-text);
                font-size: 14px;
                text-transform: uppercase;
            }

            #app-store ul,
            #app-store li {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            #app-store .card-list {
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                gap: 20px;
            }

            #app-store .card {
                position: relative;
                padding: 0px;
                height: 420px;
                flex: 0 0 40%;
                box-sizing: border-box;
            }

            #app-store .card:nth-child(4n + 1),
            #app-store .card:nth-child(4n + 4) {
                flex: 0 1 calc(60% - 20px);
            }

            .card-content-container {
                width: 100%;
                height: 100%;
                position: relative;
                display: block;
                pointer-events: none;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

            .card-content-container.open {
                top: 0;
                left: 0;
                right: 0;
                position: fixed;
                z-index: 1000001;
                overflow: hidden;
                padding: 40px 0;
                justify-content: center;
            }

            .dark .h3, .dark span {
                color: #0f1115;
            }

            .card-content {
                pointer-events: auto;
                position: relative;
                border-radius: 20px;
                background: var(--layer);
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }

            .open .card-content {
                width: unset;
                height: unset;
                max-width: 700px;
                overflow: hidden;
                pointer-events: none;
            }

            .card-open-link {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .card-image-container {
                overflow: hidden;
                height: 420px;
                display: flex;
                justify-content: stretch;
                flex-direction: column;
                position: relative;
            }

            .card-image {
                width: 100%;
                position: absolute;
            }

            .open .card-image-container,
            .open .title-container {
                z-index: 1;
            }

            .title-container {
            position: absolute;
                top: 15px;
                left: 15px;
                max-width: 300px;
            }

            .open .title-container {
                top: 30px;
                left: 30px;
            }

            .title-container h2 {
                color: #fff;
                margin: 8px 0;
            }

            .category {
                color: #fff;
                font-size: 14px;
                text-transform: uppercase;
            }

            .overlay {
                inset: 0;
                z-index: 1000000;
                position: fixed;
                background: rgba(0, 0, 0, 0.8);
                will-change: opacity;
            }

            .overlay a {
                display: block;
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100vw;
                left: 50%;
                transform: translateX(-50%);
            }

            .content-container {
                padding: 35px;
                max-width: 700px;
                width: 90vw;
            }

            @media only screen and (max-width: 990px) {
                #sandbox {
                    align-items: stretch;
                }

                body {
                    overflow: hidden;
                }

                #app-store {
                    padding: 60px 20px;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                #app-store .card-list {
                    gap: 10px;
                }

                #app-store .card {
                    flex: 0 1 calc(50% - 5px);
                    height: 280px;
                }

                li .card-image {
                    top: unset !important;
                    bottom: -10px !important;
                    left: 0 !important;
                    right: 0 !important;
                    min-width: 250px;
                    min-height: 300px;
                }

                li .title-container {
                  visibility: hidden;
                }

                .card-image-container {
                    height: 280px;
                }

                #app-store .card:nth-child(4n + 1),
                #app-store .card:nth-child(4n + 4) {
                    flex: 0 1 calc(50% - 5px);
                    max-width: 100%;
                }

                #app-store .card-content-container.open {
                    padding: 0;
                }
            }

    `}</style>
    )
}

/**
 * ==============   Mock data   ================
 */

// Photos by Unsplash
const items: Item[] = [
    {
        id: "a",
        category: "Travel",
        title: "5 Inspiring Apps for Your Next Trip",
        content: (
            <>
                <p className="big">
                    Love to travel? So do the makers of these five subscription
                    apps. For a small monthly fee, they'll help you find the
                    best deals on flights, hotels, and some other stuff we turn
                    a blind eye to.
                </p>
                <p className="big">
                    Plan your perfect itinerary with intelligent recommendations
                    based on your interests, time, and credit history.
                </p>
            </>
        ),
        top: -300,
    },
    {
        id: "c",
        category: "How to",
        title: "Contemplate the Meaning of Life Twice a Day",
        content: (
            <>
                <p className="big">
                    What is life? You can't spell "life" without "i". You also
                    can't spell "life" without "l", "f", and "e". Worth thinking
                    about.
                </p>
                <p className="big">
                    The only way to find out more about life is to think about
                    it. And the only way to think about it is twice daily using
                    an app.
                </p>
                <p className="big">
                    Apps? We got 'em. Therefore we got the meaning of life.
                </p>
            </>
        ),
        bottom: -50,
        theme: "dark",
        width: "110%",
        left: -20,
    },
    {
        id: "d",
        category: "Steps",
        title: "Urban Exploration Apps for the Vertically-Inclined",
        content: (
            <>
                <p className="big">
                    Get off the beaten path. Find the best views, skywalks, and
                    elevated gardens in your city.
                </p>
                <p className="big">
                    Locked door? No problem! This app crowdsources the access
                    code to every door in your city.
                </p>
            </>
        ),
        theme: "dark",
        width: "200%",
        left: -100,
    },
    {
        id: "b",
        category: "Hats",
        title: "Take Control of Your Hat Life With This Stunning New App",
        content: (
            <>
                <p className="big">
                    Whether you're serious hat enthusiast, or just a filthy
                    casual, this new app revolutionizes how you organize, care
                    for, and expand your hat collection.
                </p>
                <p className="big">
                    Stay up to date with the latest hat trends, get personalized
                    hat care reminders, and use predictive analytics to discover
                    the last place you left your hat.
                </p>
                <p className="big">
                    Why follow the crowd when you can be the crowd?
                </p>
            </>
        ),
        bottom: -100,
    },
]

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

interface CardProps {
    id: string
    title: string
    category: string
    open: VoidFunction
    top?: number
    bottom?: number
    width?: string
    left?: number
    theme?: "dark" | "light"
}

interface Item {
    id: string
    category: string
    title: string
    content: React.ReactNode
    top?: number
    bottom?: number
    width?: string
    left?: number
    theme?: "dark" | "light"
}