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

const notifications = ref([0])


let newIndex = 0

function addNotification() {
  notifications.value.push(++newIndex)
}

function removeNotification(id) {
  notifications.value.splice(notifications.value.indexOf(id), 1)
}
</script>

<template>
  <div id="notifications">
    <motion.ul layout :data-length="notifications.length">
      <AnimatePresence :initial="false" mode="popLayout">
        <motion.li
          v-for="id in notifications"
          :key="id"
          layout
          :initial="{ opacity: 0, y: 50, scale: 0.3 }"
          :animate="{ opacity: 1, y: 0, scale: 1 }"
          :exit="{
            opacity: 0,
            scale: 0.5,
            transition: { duration: 0.2 },
          }"
        >
          <div class="placeholder-title" />
          <div class="placeholder-message" />
          <button @click="removeNotification(id)" class="close">
            <svg width="18" height="18" viewBox="0 0 23 23">
              <motion.path
                d="M 3 16.5 L 17 2.5"
                fill="transparent"
                stroke-width="3"
                stroke="var(--feint-text)"
                stroke-linecap="round"
              />
              <motion.path
                d="M 3 2.5 L 17 16.346"
                fill="transparent"
                stroke-width="3"
                stroke="var(--feint-text)"
                stroke-linecap="round"
              />
            </svg>
          </button>
        </motion.li>
      </AnimatePresence>
    </motion.ul>
    <button
      class="add"
      @click="addNotification"
    >
      Add notification +
    </button>
  </div>
</template>

<style>
/**
 * ==============   Styles   ================
 */
#notifications {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  z-index: 10000000;
  pointer-events: none;
}

#notifications ul,
#notifications li {
  padding: 0;
  margin: 0;
}

#notifications ul {
  position: fixed;
  left: calc(50% - 150px);
  bottom: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: flex-end;
  width: 300px;
  gap: 10px;
  padding: 10px;
}

#notifications li {
  background: var(--layer);
  border: 1px solid var(--border);
  flex: 0 0 100px;
  position: relative;
  border-radius: 10px;
  pointer-events: all;
  padding: 20px 80px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#notifications .placeholder-title {
  height: 24px;
  width: 200px;
  border-radius: 5px;
  background: var(--feint-text);
}

#notifications .placeholder-message {
  height: 14px;
  width: 150px;
  border-radius: 5px;
  background: var(--feint-text);
  opacity: 0.5;
}

#notifications button {
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  pointer-events: all;
}

#notifications button.add {
  position: fixed;
  bottom: 10px;
  left: 10px;
  border-radius: 10px;
  font-size: 18px;
  background: var(--accent);
  color: #0f1115;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  z-index: 1000;
}

#notifications button.close {
  position: absolute;
  top: 15px;
  right: 10px;
}
</style>