<script setup lang="ts">
import { delay } from "motion"
import { motion, useDomRef } from "motion-v"
import { computed, onMounted, ref } from "vue"

function wait(s: number) {
    return new Promise((resolve) => delay(resolve, s))
}

const props = defineProps({
    baseDelay: {
        type: Number,
        default: 0.0015,
    },
    noise: {
        type: Number,
        default: 0.1,
    },
})

const totalCells = 10 * 13
const grid = useDomRef()
const originIndex = ref<number | null>(null)
const calculatedDelay = ref<number[]>([])

const vueBlue = "#3b8eed"
const vueBlueDark = "#255489"
const vueGreen = "#42b883"
const vueGreenDark = "#155f3e"

onMounted(() => {
    const randomOrigin = Math.floor(Math.random() * totalCells)
    const cells = grid.value?.querySelectorAll(".cell")

    if (!cells) return

    // const originPoint = getCenter(document.body)
    const delays: number[] = []

    const container = document.querySelector(".grid-container")!

    const { top, left } = container!.getBoundingClientRect()

    for (let i = 0; i < totalCells; i++) {
        const cell = cells[i]
        const cellPoint = getCenter(cell as HTMLElement)

        const distance = cellPoint.y - top
        const delay = distance * props.baseDelay // + Math.random() * props.noise
        delays.push(delay)
    }

    async function runAnimation() {
        await wait(1)
        container.style.setProperty("--bg", vueGreen)
        await wait(0.5)
        container.style.setProperty("--fg", vueBlueDark)
        await wait(0.5)
        container.style.setProperty("--bg", vueBlue)
        await wait(0.2)
        container.style.setProperty("--fg", vueGreenDark)
        await wait(0.2)
        container.style.setProperty("--bg", vueGreen)
        await wait(0.2)
        container.style.setProperty("--fg", vueBlueDark)
        await wait(0.2)
        container.style.setProperty("--bg", vueBlue)
        await wait(0.2)
        container.style.setProperty("--fg", vueGreen)
        await wait(0.2)
        container.style.setProperty("--bg", "#0f1115")
        calculatedDelay.value = delays
        originIndex.value = randomOrigin
        await wait(1.8)
        container.style.setProperty("--fg", vueGreen)
        container.style.setProperty("--bg", "#0f1115")
        await wait(0.2)
        container.style.setProperty("--fg", "#0f1115")
        container.style.setProperty("--bg", vueGreen)
        await wait(0.2)
        container.style.setProperty("--fg", vueGreen)
        container.style.setProperty("--bg", "#0f1115")
        await wait(0.2)
        container.style.setProperty("--fg", "#0f1115")
        container.style.setProperty("--bg", vueGreen)
        await wait(0.2)
        container.style.setProperty("--fg", vueGreen)
        container.style.setProperty("--bg", "#0f1115")
        await wait(0.2)
        originIndex.value = null
        await wait(1.2)
        container.style.setProperty("--fg", "#0f1115")
        container.style.setProperty("--bg", vueGreen)
        await wait(0.2)
        container.style.setProperty("--fg", "#0f1115")
        container.style.setProperty("--bg", vueBlue)
        await wait(0.2)
        container.style.setProperty("--bg", "#fff312")

        await wait(1)

        await runAnimation()
    }

    runAnimation()

    delay(() => {
        // calculatedDelay.value = delays
        // originIndex.value = randomOrigin
        // delay(() => {
        //     container.style.setProperty("--fg", "#35eb9a")
        //     container.style.setProperty("--bg", "#0f1115")
        //     delay(() => {
        //         container.style.setProperty("--bg", "#35eb9a")
        //         container.style.setProperty("--fg", "#0f1115")
        //         delay(() => {
        //             container.style.setProperty("--fg", "#0f1115")
        //             container.style.setProperty("--bg", "#35eb9a")
        //         }, 0.2)
        //     }, 0.2)
        // }, 1)
    }, 1)
})

const variants = {
    hidden: { opacity: 0, scale: 0.5 },
    visible: { opacity: 1, scale: 1 },
}

/**
 * ==============   Utils   ================
 */
function getCenter(element: HTMLElement) {
    const { x, y, width, height } = element.getBoundingClientRect()
    return { x: x + width / 2, y: y + height / 2 }
}

const cells = computed(() => {
    return Array.from({ length: totalCells }, (_, index) => index)
})
</script>

<template>
    <div class="grid-container">
        <motion.div
            ref="grid"
            class="grid"
            :initial="'hidden'"
            :animate="originIndex !== null ? 'visible' : 'hidden'"
        >
            <motion.div
                v-for="index in cells"
                :key="index"
                :class="['cell']"
                :variants="variants"
                :transition="{
                    type: 'spring',
                    bounce: 0,
                    visualDuration: 0.5,
                    delay: calculatedDelay[index],
                }"
                >Vue</motion.div
            >
        </motion.div>
        <div class="logo-container">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="logo"
                viewBox="0 0 1260 454"
            >
                <path
                    d="M475.753 0L226.8 453.6L0 453.6L194.392 99.4116C224.526 44.5081 299.724 0 362.353 0L475.753 0Z"
                    stroke="none"
                ></path>
                <path
                    d="M1031.93 113.4C1031.93 50.7709 1082.7 0 1145.33 0C1207.96 0 1258.73 50.7709 1258.73 113.4C1258.73 176.029 1207.96 226.8 1145.33 226.8C1082.7 226.8 1031.93 176.029 1031.93 113.4Z"
                    stroke="none"
                ></path>
                <path
                    d="M518.278 0L745.078 0L496.125 453.6L269.325 453.6L518.278 0Z"
                    stroke="none"
                ></path>
                <path
                    d="M786.147 0L1012.95 0L818.555 354.188C788.422 409.092 713.223 453.6 650.594 453.6L537.194 453.6L786.147 0Z"
                    stroke="none"
                ></path>
            </svg>
        </div>
    </div>
</template>

<style>
.grid-container {
    --bg: #fff312;
    --fg: #0f1115;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    width: 559px;
    background-color: var(--fg);
    padding: 20px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.cell {
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg);
    width: 106px;
    height: 106px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 23%;
    outline: 5px solid var(--fg);
}

.logo {
    width: 85px;
    fill: var(--fg);
}
</style>