<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { animate, useTime, useTransform, motion, AnimatePresence } from 'motion-v'

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

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

const getNextState = (state: keyof typeof STATES) => {
    const states = Object.keys(STATES) as (keyof typeof STATES)[]
    const nextIndex = (states.indexOf(state) + 1) % states.length
    return states[nextIndex]
}

const badgeState = ref<keyof typeof STATES>("idle")
const badgeRef = ref(null)
const labelWidth = ref(0)
const measureRef = ref<HTMLDivElement | null>(null)

const time = useTime()
const rotate = useTransform(time, [0, 1000], [0, 360], { clamp: false })

watch(badgeState, (newState) => {
    if (!badgeRef.value) return

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

onMounted(() => {
    if (measureRef.value) {
        const { width } = measureRef.value.getBoundingClientRect()
        labelWidth.value = width
    }
})

watch(() => badgeState.value, () => {
    if (measureRef.value) {
        const { width } = measureRef.value.getBoundingClientRect()
        labelWidth.value = width
    }
},{
  flush: 'post'
})
</script>

<template>
    <div class="container">
        <button @click="badgeState = getNextState(badgeState)">
            <motion.div 
                ref="badgeRef"
                class="badge"
                :style="{
                    gap: badgeState === 'idle' ? 0 : '8px'
                }"
            >
                <!-- Icon -->
                <motion.span 
                    class="icon-container"
                    :animate="{
                        width: badgeState === 'idle' ? 0 : '20px'
                    }"
                    :transition="SPRING_CONFIG"
                >
                <AnimatePresence>
                    <motion.span
                        class="icon"
                        :key="badgeState"
                        :initial="{
                            y: -40,
                            scale: 0.5,
                            filter: 'blur(6px)',
                            WebkitFilter: 'blur(6px)'
                        }"
                        :animate="{
                            y: 0,
                            scale: 1,
                            filter: 'blur(0px)',
                            WebkitFilter: 'blur(0px)'
                        }"
                        :exit="{
                            y: 40,
                            scale: 0.5,
                            filter: 'blur(6px)',
                            WebkitFilter: 'blur(6px)'
                        }"
                        :transition="{
                            duration: 0.15,
                            ease: 'easeInOut'
                        }"
                    >
                        <!-- Processing Icon -->
                        <motion.div
                            v-if="badgeState === 'processing'"
                            :style="{
                                rotate,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                width: '20px',
                                height: '20px'
                            }"
                        >
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                <motion.path 
                                    d="M21 12a9 9 0 1 1-6.219-8.56"
                                    :initial="{ pathLength: 0 }"
                                    :animate="{ pathLength: 1 }"
                                    :transition="SPRING_CONFIG"
                                />
                            </svg>
                        </motion.div>

                        <!-- Success Icon -->
                        <svg v-if="badgeState === 'success'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <motion.polyline 
                                points="4 12 9 17 20 6"
                                :initial="{ pathLength: 0 }"
                                :animate="{ pathLength: 1 }"
                                :transition="SPRING_CONFIG"
                            />
                        </svg>

                        <!-- Error Icon -->
                        <svg v-if="badgeState === 'error'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <motion.line 
                                x1="6" y1="6" x2="18" y2="18"
                                :initial="{ pathLength: 0 }"
                                :animate="{ pathLength: 1 }"
                                :transition="SPRING_CONFIG"
                            />
                            <motion.line 
                                x1="18" y1="6" x2="6" y2="18"
                                :initial="{ pathLength: 0 }"
                                :animate="{ pathLength: 1 }"
                                :transition="{ ...SPRING_CONFIG, delay: 0.1 }"
                            />
                        </svg>
                    </motion.span>
                </AnimatePresence>
                </motion.span>

                <!-- Label -->
                <div
                    ref="measureRef"
                    class="measure"
                >
                    {{ STATES[badgeState] }}
                </div>

                <motion.span
                    class="label-container"
                    :animate="{
                        width: labelWidth
                    }"
                    :transition="SPRING_CONFIG"
                >
                <AnimatePresence mode="sync" :initial="false">
                    <motion.div
                        class="label"
                        :key="badgeState"
                        :initial="{
                            y: -20,
                            opacity: 0,
                            filter: 'blur(10px)',
                            WebkitFilter: 'blur(10px)',
                            position: 'absolute'
                        }"
                        :animate="{
                            y: 0,
                            opacity: 1,
                            filter: 'blur(0px)',
                            WebkitFilter: 'blur(0px)',
                            position: 'relative'
                        }"
                        :exit="{
                            y: 20,
                            opacity: 0,
                            filter: 'blur(10px)',
                            WebkitFilter: 'blur(10px)',
                            position: 'absolute'
                        }"
                        :transition="{
                            duration: 0.2,
                            ease: 'easeInOut'
                        }"
                    >
                        {{ STATES[badgeState] }}
                    </motion.div>
                    </AnimatePresence>
                </motion.span>
            </motion.div>
        </button>
    </div>
</template>

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

.icon {
    position: absolute;
    left: 0;
    top: 0;
}

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

.label-container {
    position: relative;
}

.label {
    text-wrap: nowrap;
}
</style>