<script setup lang="ts">
import { ref } from 'vue'
import { motion } from 'motion-v'

const N_NOTIFICATIONS = 3

const NOTIFICATION_HEIGHT = 60
const NOTIFICATION_WIDTH = 280
const NOTIFICATION_GAP = 8

const isOpen = ref(false)

const stackVariants = {
    open: {
        y: 20,
        scale: 0.9,
        cursor: "pointer",
    },
    closed: {
        y: 0,
        scale: 1,
        cursor: "default",
    },
}

const headerVariants = {
    open: {
        y: 0,
        scale: 1,
        opacity: 1,
    },
    closed: {
        y: 60,
        scale: 0.8,
        opacity: 0,
    },
}

function getNotificationVariants(index: number) {
    return {
        open: {
            y: 0,
            scale: 1,
            opacity: 1,
            pointerEvents: "auto",
            cursor: "pointer",
        },
        closed: {
            y: -index * (NOTIFICATION_HEIGHT + NOTIFICATION_GAP) - NOTIFICATION_GAP * index,
            scale: 1 - index * 0.1,
            opacity: 1 - index * 0.4,
            pointerEvents: index === 0 ? "auto" : "none",
            cursor: index === 0 ? "pointer" : "default",
        },
    }
}

function getNotificationStyle(index: number) {
    return {
        height: `${NOTIFICATION_HEIGHT}px`,
        width: `${NOTIFICATION_WIDTH}px`,
        backgroundColor: `#f5f5f5`,
        borderRadius: '16px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: N_NOTIFICATIONS - index,
        userSelect: 'none',
    }
}
</script>

<template>
    <motion.div
        :style="{
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            gap: `${NOTIFICATION_GAP}px`
        }"
        :variants="stackVariants"
        :initial="false"
        :animate="isOpen ? 'open' : 'closed'"
        :transition="{
            type: 'spring',
            mass: 0.7,
        }"
    >
        <motion.div
            class="header"
            :variants="headerVariants"
            :transition="{
                type: 'spring',
                stiffness: 600,
                damping: 50,
                delay: isOpen ? 0.2 : 0,
            }"
        >
            <motion.h2 class="header-title">Notifications</motion.h2>
            <motion.button
                class="header-close"
                :hover="{
                    backgroundColor: '#f5f5f5',
                    color: '#0f1115',
                }"
                @click="isOpen = false"
            >
                Collapse
            </motion.button>
        </motion.div>

        <motion.div
            v-for="(_, index) in Array(N_NOTIFICATIONS)"
            :key="index"
            :style="getNotificationStyle(index)"
            :variants="getNotificationVariants(index)"
            :transition="{
                type: 'spring',
                stiffness: 600,
                damping: 50,
                delay: index * 0.04,
            }"
            @click="isOpen = !isOpen"
        />
    </motion.div>
</template>

<style>
.header {
    position: absolute;
    top: -40px;
    left: 0;
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform-origin: bottom center;
    pointer-events: none;
}

.header-title {
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
}

.header-close {
    font-size: 14px;
    line-height: 1;
    margin-right: 8px;
    background-color: #1f1f1f;
    padding: 4px 12px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
}
</style>