<div id="notifications">
    <ul id="notification-list"></ul>
    <button class="add" id="add-button">Add notification +</button>
</div>

<script type="module">
    import { animate, press } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    // Notification state
    let notifications = []
    let newIndex = 0

    const notificationList = document.getElementById("notification-list")
    const addButton = document.getElementById("add-button")

    function addNewNotification() {
        newIndex++
        notifications.push(newIndex)
        createNotification(newIndex)
    }

    // Initialise with a notification
    addNewNotification()

    // Add a new notification when the button is pressed
    press(addButton, () => {
        animate(addButton, { scale: 0.95 })

        return () => {
            animate(addButton, { scale: 1 })
            addNewNotification()
        }
    })

    function createNotification(id) {
        // Create notification elements
        const li = document.createElement("li")
        li.id = `notification-${id}`
        li.setAttribute("data-id", id)

        li.innerHTML = `
            <div class="placeholder-title"></div>
            <div class="placeholder-message"></div>
            <button class="close">
                <svg width="18" height="18" viewBox="0 0 23 23">
                    <path fill="transparent" stroke-width="3" stroke="var(--feint-text)" stroke-linecap="round" d="M 3 16.5 L 17 2.5" />
                    <path fill="transparent" stroke-width="3" stroke="var(--feint-text)" stroke-linecap="round" d="M 3 2.5 L 17 16.346" />
                </svg>    
            </button>
        `

        // Close notification when close button is pressed
        press(li.querySelector(".close"), () => {
            removeNotification(id)
        })

        // Add to list
        animateListLayout(() => {
            notificationList.appendChild(li)
        })

        // Animate the notification entry
        animate(
            li,
            {
                opacity: [0, 1],
                y: [20, 0],
                scale: [0.3, 1],
            },
            {
                duration: 0.3,
                easing: "ease-out",
            }
        )
    }

    function removeNotification(id) {
        const notification = document.getElementById(`notification-${id}`)
        if (!notification) return

        // Remove from our array
        notifications = notifications.filter((item) => item !== id)

        // Animate exit
        animate(
            notification,
            { opacity: 0, scale: 0.5 },
            { duration: 0.2, easing: "ease-in" }
        ).then(() => {
            animateListLayout(() => {
                notification.remove()
            })
        })
    }

    function animateListLayout(updateDom) {
        // Get all notification elements and record their positions
        const notificationElements = document.querySelectorAll(
            "#notification-list li"
        )
        const initialPositions = new Map()

        notificationElements.forEach((element) => {
            const rect = element.getBoundingClientRect()
            initialPositions.set(element.id, rect.top)
        })

        // Execute the DOM update (add or remove notifications)
        updateDom()

        /**
         * Measure new positions and calculate deltas. We do this read operation in
         * an initial pass, and **then** apply the initial delta transform/start
         * animations (write operations) in a second pass to avoid layout thrashing.
         */
        const layoutDelta = []
        notificationElements.forEach((element) => {
            // Skip elements that were removed
            if (!document.body.contains(element)) return

            const newRect = element.getBoundingClientRect()
            const oldTop = initialPositions.get(element.id)

            if (oldTop !== undefined) {
                const delta = oldTop - newRect.top
                layoutDelta.push({ element, delta })
            }
        })

        /**
         * Apply initial delta transform and start animations (DOM write)
         */
        layoutDelta.forEach(({ element, delta }) => {
            element.style.transform = `translateY(${delta}px)`
            animate(
                element,
                { y: [delta, 0] },
                {
                    duration: 0.3,
                    easing: "ease-out",
                }
            )
        })
    }
</script>

<style>
    #notifications {
        display: flex;
        width: 100vw;
        height: 100vh;
        flex-direction: column;
        z-index: 10000000;
        pointer-events: none;
    }

    #notifications ul,
    #notifications li {
        padding: 0;
        margin: 0;
    }

    #notifications ul {
        position: fixed;
        left: calc(50% - 150px);
        bottom: 0;
        display: flex;
        flex-direction: column;
        list-style: none;
        justify-content: flex-end;
        width: 300px;
        gap: 10px;
        padding: 10px;
    }

    #notifications li {
        background: #0b1011;
        border: 1px solid #1d2628;
        flex: 0 0 100px;
        position: relative;
        border-radius: 10px;
        pointer-events: all;
        padding: 20px 80px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        will-change: transform, opacity;
    }

    #notifications .placeholder-title {
        height: 24px;
        width: 200px;
        border-radius: 5px;
        background: var(--feint-text);
    }

    #notifications .placeholder-message {
        height: 14px;
        width: 150px;
        border-radius: 5px;
        background: var(--feint-text);
        opacity: 0.5;
    }

    #notifications button {
        outline: none;
        -webkit-appearance: none;
        cursor: pointer;
        pointer-events: all;
    }

    #notifications button.add {
        position: fixed;
        bottom: 10px;
        left: 10px;
        border-radius: 10px;
        font-size: 18px;
        background: var(--accent);
        color: #0f1115;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 12px;
    }

    #notifications button.close {
        position: absolute;
        top: 15px;
        right: 10px;
        background: transparent;
        border: none;
        padding: 0;
    }
</style>