"use client"

import { AnimatePresence, motion } from "motion/react"
import Image from "next/image"
import { useState } from "react"
import { LoremIpsum } from "react-lorem-ipsum"

function Card({
    id,
    title,
    category,
    open,
}: {
    id: string
    title: string
    category: string
    open: VoidFunction
}) {
    return (
        <li className="card" onClick={open}>
            <div className="card-content-container">
                <motion.div
                    className="card-content"
                    layoutId={`card-container-${id}`}
                >
                    <motion.div
                        className="card-image-container"
                        layoutId={`card-image-container-${id}`}
                    >
                        <img
                            className="card-image"
                            src={`/photos/app-store/${id}.jpg`}
                            alt=""
                        />
                    </motion.div>
                    <motion.div
                        className="title-container"
                        layoutId={`title-container-${id}`}
                    >
                        <span className="category">{category}</span>
                        <h2>{title}</h2>
                    </motion.div>
                </motion.div>
            </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 } = 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">
                <motion.div
                    className="card-content"
                    layoutId={`card-container-${id}`}
                >
                    <motion.div
                        className="card-image-container"
                        layoutId={`card-image-container-${id}`}
                    >
                        <img
                            className="card-image"
                            src={`/photos/app-store/${id}.jpg`}
                            alt=""
                        />
                    </motion.div>
                    <motion.div
                        className="title-container"
                        layoutId={`title-container-${id}`}
                    >
                        <span className="category">{category}</span>
                        <h2>{title}</h2>
                    </motion.div>
                    <motion.div className="content-container" animate>
                        <LoremIpsum
                            p={6}
                            avgWordsPerSentence={6}
                            avgSentencesPerParagraph={4}
                        />
                    </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>
                    <span className="date">Thursday, August 8th</span>
                    <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>{`

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

            #app-store header {
                border-bottom: 1px solid var(--divider);
                position: relative;
                padding-bottom: 10px;
                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-weight: 700;
                font-size: 32px;
                margin: 5px 0;
            }

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

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

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

            #app-store .card:nth-child(4n + 2) {
                padding-left: 20px;
            }

            #app-store .card:nth-child(4n + 3) {
                padding-right: 20px;
            }

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

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

            .card-content {
                pointer-events: auto;
                position: relative;
                border-radius: 20px;
                background: #1c1c1e;
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }

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

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

            .card-image-container {
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                height: 420px;
                width: 100vw;
            }

            .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: 460px 35px 35px 35px;
                max-width: 700px;
                width: 90vw;
            }

            p {
                color: #9d9ca1;
                font-size: 20px;
                line-height: 28px;
            }

            @media only screen and (max-width: 990px) {
                #app-store {
                    padding: 100px 20px;
                }

                #app-store .card {
                    flex: 1 0 100%;
                    max-width: 100%;
                    padding: 10px;
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }

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

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

    `}</style>
    )
}

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

const items = [
    // Photo by ivan Torres on Unsplash
    {
        id: "c",
        category: "Pizza",
        title: "5 Food Apps Delivering the Best of Your City",
        pointOfInterest: 80,
        backgroundColor: "#814A0E",
    },
    // Photo by Dennis Brendel on Unsplash
    {
        id: "f",
        category: "How to",
        title: "Arrange Your Apple Devices for the Gram",
        pointOfInterest: 120,
        backgroundColor: "#959684",
    },
    // Photo by Alessandra Caretto on Unsplash
    {
        id: "a",
        category: "Pedal Power",
        title: "Map Apps for the Superior Mode of Transport",
        pointOfInterest: 260,
        backgroundColor: "#5DBCD2",
    },
    // Photo by Taneli Lahtinen on Unsplash
    {
        id: "g",
        category: "Holidays",
        title: "Our Pick of Apps to Help You Escape From Apps",
        pointOfInterest: 200,
        backgroundColor: "#8F986D",
    },
    // Photo by Simone Hutsch on Unsplash
    {
        id: "d",
        category: "Photography",
        title: "The Latest Ultra-Specific Photography Editing Apps",
        pointOfInterest: 150,
        backgroundColor: "#FA6779",
    },
    // Photo by Siora Photography on Unsplash
    {
        id: "h",
        category: "They're all the same",
        title: "100 Cupcake Apps for the Cupcake Connoisseur",
        pointOfInterest: 60,
        backgroundColor: "#282F49",
    },
    // Photo by Yerlin Matu on Unsplash
    {
        id: "e",
        category: "Cats",
        title: "Yes, They Are Sociopaths",
        pointOfInterest: 200,
        backgroundColor: "#AC7441",
    },
    // Photo by Ali Abdul Rahman on Unsplash
    {
        id: "b",
        category: "Holidays",
        title: "Seriously the Only Escape is the Stratosphere",
        pointOfInterest: 260,
        backgroundColor: "#CC555B",
    },
]