<div class="container">
    <button id="badge">
        <div class="badge">
            <div class="icon-container"></div>
            <div class="label-container">
                <div class="label-measure"></div>
                <div class="label"></div>
            </div>
        </div>
    </button>
</div>

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

    const STATES = {
        idle: "Start",
        processing: "Processing",
        success: "Done",
        error: "Something went wrong",
    }

    const ICON_SIZE = 20
    const STROKE_WIDTH = 1.5
    const VIEW_BOX_SIZE = 24

    const svgAttrs = `width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}" fill="none" stroke="currentColor" strokeWidth="${STROKE_WIDTH}" strokeLinecap="round" strokeLinejoin="round"`

    const pathSpringConfig = {
        type: "spring",
        stiffness: 150,
        damping: 20,
    }

    const springConfig = {
        type: "spring",
        stiffness: 600,
        damping: 30,
    }

    let currentState = "idle"
    const badge = document.querySelector(".badge")
    const iconContainer = document.querySelector(".icon-container")
    const labelContainer = document.querySelector(".label-container")
    const labelMeasure = document.querySelector(".label-measure")
    const label = document.querySelector(".label")

    // Track active animations
    let activeAnimations = []

    function getNextState(state) {
        const states = Object.keys(STATES)
        const nextIndex = (states.indexOf(state) + 1) % states.length
        return states[nextIndex]
    }

    const iconAnimations = {
        processing: () => {
            const path = iconContainer.querySelector("path")
            const container = iconContainer.querySelector("div")

            activeAnimations.push(
                animate(path, { pathLength: [0, 1] }, pathSpringConfig),
                animate(
                    container,
                    { rotate: 360 },
                    { duration: 1, repeat: Infinity, ease: "linear" }
                )
            )
        },
        success: () => {
            const polyline = iconContainer.querySelector("polyline")

            activeAnimations.push(
                animate(polyline, { pathLength: [0, 1] }, pathSpringConfig)
            )
        },
        error: () => {
            const lines = iconContainer.querySelectorAll("line")

            activeAnimations.push(
                animate(lines[0], { pathLength: [0, 1] }, pathSpringConfig),
                animate(
                    lines[1],
                    { pathLength: [0, 1] },
                    { ...pathSpringConfig, delay: 0.1 }
                )
            )
        },
    }

    const iconHTML = {
        processing: `
            <div style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: ${ICON_SIZE}px;
                height: ${ICON_SIZE}px;
            ">
                <svg ${svgAttrs}>
                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                </svg>
            </div>
        `,
        success: `
            <svg ${svgAttrs}>
                <polyline points="4 12 9 17 20 6" />
            </svg>
        `,
        error: `
            <svg ${svgAttrs}>
                <line x1="6" y1="6" x2="18" y2="18" />
                <line x1="18" y1="6" x2="6" y2="18" />
            </svg>
        `,
    }

    function updateIcon(state) {
        iconContainer.innerHTML = iconHTML[state] || ""

        if (iconHTML[state]) {
            activeAnimations.push(
                animate(iconContainer, { width: ICON_SIZE }, springConfig)
            )

            iconAnimations[state]?.()
        } else {
            activeAnimations.push(
                animate(iconContainer, { width: 0 }, springConfig)
            )
        }
    }

    function updateLabel(state) {
        const text = STATES[state]
        labelMeasure.textContent = text

        const width = labelMeasure.getBoundingClientRect().width
        activeAnimations.push(animate(labelContainer, { width }, springConfig))

        const newLabelHTML = `<div style="position: absolute; white-space: nowrap;">${text}</div>`
        const tempContainer = document.createElement("div")
        tempContainer.innerHTML = newLabelHTML
        const newLabel = tempContainer.firstChild

        activeAnimations.push(
            animate(
                newLabel,
                {
                    y: [-20, 0],
                    opacity: [0, 1],
                    filter: ["blur(10px)", "blur(0px)"],
                },
                {
                    duration: 0.2,
                    ease: "easeInOut",
                }
            )
        )
        if (label.children.length) {
            const animation = animate(
                label.children[0],
                {
                    y: [0, 20],
                    opacity: [1, 0],
                    filter: ["blur(0px)", "blur(10px)"],
                },
                {
                    duration: 0.2,
                    ease: "easeInOut",
                }
            )
            activeAnimations.push(animation)

            animation.then(() => {
                label.children[0]?.remove()
            })
        }

        label.appendChild(newLabel)
    }

    function updateBadge(state) {
        badge.style.gap = state === "idle" ? "0px" : "8px"

        if (state === "error") {
            activeAnimations.push(
                animate(
                    badge,
                    { x: [0, -6, 6, -6, 0] },
                    {
                        duration: 0.3,
                        ease: "easeInOut",
                        times: [0, 0.25, 0.5, 0.75, 1],
                        delay: 0.1,
                    }
                )
            )
        } else if (state === "success") {
            activeAnimations.push(
                animate(
                    badge,
                    { scale: [1, 1.2, 1] },
                    {
                        duration: 0.3,
                        ease: "easeInOut",
                        times: [0, 0.5, 1],
                    }
                )
            )
        }
    }

    function updateState(state) {
        // Complete any active animations before starting new ones
        activeAnimations.forEach((animation) => {
            animation.complete()
        })

        // Reset the active animations array
        activeAnimations = []

        currentState = state
        updateIcon(state)
        updateLabel(state)
        updateBadge(state)
    }

    press("#badge", () => {
        return () => updateState(getNextState(currentState))
    })

    // Initialize with idle state
    updateState("idle")
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        height: 80px;
    }

    .badge {
        background-color: #f5f5f5;
        color: #0f1115;
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
        border-radius: 999px;
        will-change: transform, filter;
    }

    .icon-container {
        height: 20px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0;
        overflow: hidden;
    }

    .label-container {
        position: relative;
        height: 20px;
    }

    .label-measure {
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
    }

    .label {
        position: relative;
        height: 100%;
    }

    button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }
</style>