<script setup lang="ts">
import { motion } from 'motion-v'
import { ref, onMounted, onBeforeUnmount,type CSSProperties } from 'vue'

const initialOrder = [
    "#ff0088",
    "#dd00ee",
    "#9911ff",
    "#0d63f8",
]

const order = ref([...initialOrder])

let intervalId: number | null = null

onMounted(() => {
    intervalId = window.setInterval(() => {
        order.value = shuffle(order.value)
    }, 1000)
})

onBeforeUnmount(() => {
    if (intervalId !== null) {
        clearInterval(intervalId)
    }
})

/**
 * ==============   Utils   ================
 */
function shuffle([...array]: string[]) {
    return array.sort(() => Math.random() - 0.5)
}

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

const spring = {
    type: 'spring',
    damping: 20,
    stiffness: 300,
}

const container: CSSProperties = {
    listStyle: 'none',
    padding: '0px',
    margin: '0px',
    position: 'relative',
    display: 'flex',
    flexWrap: 'wrap',
    gap: '10px',
    width: '300px',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
}

const item = {
    width: "100px",
    height: "100px",
    borderRadius: "10px",
}
</script>

<template>
    <ul :style="container">
        <motion.li
            v-for="backgroundColor in order"
            :key="backgroundColor"
            layout
            :transition="spring"
            :style="{ ...item, backgroundColor }"
        />
    </ul>
</template>