<template>
  <teleport to="#app">
    <TransitionGroup name="pankow-notification-fade" :class="`pankow-notification-container ${position}`" tag="div">
      <div v-for="message in messages" key="id">
        <div class="pankow-notification" :[message.type]="''">
          {{ message.text }}
          <Icon @click="onClose(message.id)" icon="fa-solid fa-xmark" class="pankow-notification-close"/>
        </div>
      </div>
    </TransitionGroup>
  </teleport>
</template>

<script>

import { uuidv4 } from '../utils.js';

import Icon from './Icon.vue';

export default {
  name: 'Notification',
  components: {
    Icon
  },
  props: {
    position: {
      type: String,
      default: 'top-center',
      validator(value, props) {
        return [ 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' ].includes(value);
      }
    }
  },
  data() {
    return {
      messages: []
    }
  },
  methods: {
    raise(options) {
      const id = uuidv4();
      const text = typeof options === 'object' && 'text' in options ? options.text : options;
      const persistent = typeof options === 'object' && 'persistent' in options ? options.persistent : false;
      const timeout = typeof options === 'object' && 'timeout' in options ? options.timeout : 2000;
      const type = typeof options === 'object' && 'type' in options ? options.type : null;

      this.messages.push({ id, text, persistent, type });

      if (!persistent) {
        setTimeout(() => {
          const index = this.messages.findIndex((value) => value.id === id);
          if (index > -1) this.messages.splice(index, 1);
        }, timeout);
      }
    },
    onClose(id) {
      const index = this.messages.findIndex((value) => value.id === id);
      if (index > -1) this.messages.splice(index, 1);
    }
  },
  mounted() {
    if (!window.pankow) window.pankow = {};
    if (window.pankow.notify) return console.error('Pankow: Notification DOM node already exists! Only ever use a single one.');

    window.pankow.notify = (options) => { this.raise(options); }
  }
};

</script>

<style>

.pankow-notification-container {
  position: absolute;
  z-index: 30001;
}

.pankow-notification-container.top-left {
  top: 0;
  left: 10px;
}

.pankow-notification-container.top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.pankow-notification-container.top-right {
  top: 0;
  right: 10px;
  text-align: right;
}

.pankow-notification-container.bottom-left {
  left: 10px;
  bottom: 10px;
}

.pankow-notification-container.bottom-center {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  bottom: 10px;
}

.pankow-notification-container.bottom-right {
  right: 10px;
  text-align: right;
  bottom: 10px;
}

.pankow-notification {
  display: inline-block;
  background-color: rgba(255,255,255,0.6);
  opacity: 0.9;
  padding: 10px 15px;
  margin-top: 10px;
  text-align: left;
  color: black;
  box-shadow: var(--pankow-notification-shadow);
  border-radius: var(--pankow-border-radius);
}

.pankow-notification[danger] {
  background-color: var(--pankow-color-danger);
  color: white;
}

.pankow-notification[success] {
  background-color: var(--pankow-color-success);
  color: white;
}

.pankow-notification[secondary] {
  background-color: var(--pankow-color-secondary);
  color: white;
}

.pankow-notification:hover {
  opacity: 1;
}

.pankow-notification-close {
  padding: 5px;
  cursor: pointer;
}

.pankow-notification-fade-move,
.pankow-notification-fade-enter-active,
.pankow-notification-fade-leave-active {
  transition: all 0.25s ease-in-out;
}

.pankow-notification-fade-enter-from,
.pankow-notification-fade-leave-to {
  opacity: 0;
  transform: scale(0.01);
}

</style>