<template>
  <div class="root" v-show="notifications.length">
    <transition-group
      tag="ol" name="toasts" class="toastblock"
    >
      <li
        v-for="item of toasts"
        :key="item.time.isoFormat()"
        :class="['toast', `toast-level-${item.level}`]"
      >
        <span>{{ item.text }}</span>
        <button
          type="button" @click="removeToast(item)"
          class="toast-removebutton"
        >
          ✕
        </button>
      </li>
    </transition-group>
    <!-- <details class="logblock">
      <summary>通知ログ</summary>
      <ol>
        <li
          v-for="item of notifications"
          :key="item.time.toISOString()"
        >
          <span>
            [<time :datetime="item.time.toISOString()">{{
              `${
                item.time.getHours().toString().padStart(2, '0')
              }:${
                item.time.getMinutes().toString().padStart(2, '0')
              }:${
                item.time.getSeconds().toString().padStart(2, '0')
              }`
            }}</time>]
          </span>
          <span>[{{ item.level }}]</span>
          <span>{{ item.text }}</span>
        </li>
      </ol>
    </details> -->
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

import { inject, keys as injectionKeys } from '../injection';


export default {
  name: 'NotificationToast',
  setup() {
    const notification = inject(injectionKeys.notification);
    const toasts = reactive([]);

    watch(
      notification.notifications,
      (notifications, prevNotifications) => {
        const newNotifications = notifications.filter(
          x => !prevNotifications.includes(x)
        );
        toasts.push(...newNotifications);
        setTimeout(() => {
          for(let x of newNotifications) {
            const idx = toasts.indexOf(x);
            toasts.splice(idx, 1);
          }
        }, 15 * 1000);
      },
    );

    function removeToast(item) {
      const idx = toasts.indexOf(item);
      toasts.splice(idx, 1);
    }

    return {
      notifications: notification.notifications, toasts, removeToast,
    };
  },
}
</script>

<style scoped>
.root {
  font-size: 1.2rem;
  position: fixed;
  inset-block-start: 3em;
  inset-inline-end: 1em;
  width: 30em;
  z-index: 1;
}


/* .toastblock {
  position: absolute;
  top: 0;
} */
.toast {
  display: flex;
  align-items: center;
  /* font-size: 1.8rem; */
  margin: 0.5em 0;
  padding: 0.5em 1em;
  border-radius: 0.5em;
}
.toast-level-error {
  border: solid 0.05em hsl(0, 100%, 50%);
  background-color: hsl(0, 100%, 90%);
  color: hsl(0, 100%, 30%);
}
.toast-level-info {
  border: solid 0.05em hsl(200, 100%, 50%);
  background-color: hsl(200, 100%, 90%);
  color: hsl(200, 100%, 30%);
}
.toast-removebutton {
  display: block;
  margin-left: auto;
  border: none;
  background-color: transparent;
  color: hsl(0, 0%, 30%);
  cursor: pointer;
}
.toast-removebutton:hover {
  color: hsl(0, 0%, 0%);
}


.toast {
  transition-property: transform opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.toasts-enter-from, .toasts-leave-to {
  opacity: 0;
}
.toasts-enter-from {
  transform: translateX(30em);
}
.toast-level-error.toasts-enter-active, .toast-level-warn.toasts-enter-active {
  animation: vibrate 0.3s ease 0.3s;
}


.logblock {
  padding: 0.2em 1em;
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
  background-color: hsl(213, 100%, 29%, 1);
  color: hsl(0, 0%, 100%);
}

@keyframes vibrate {
  0% {	transform: translateX(0);}
  16% {	transform: translateX(-5px);}
  32% {	transform: translateX(5px);}
  48% {	transform: translateX(-5px);}
  64% {	transform: translateX(5px);}
  80% {	transform: translateX(-5px);}
  100% {	transform: translateX(0);}
}
</style>
