<template>
  <transition name="app-notification">
    <div :class="['app-notification', TYPES[type].class]">
      <IconBase
        icon-name="notification"
        :width="TYPES[type].width"
        :height="TYPES[type].height"
        :viewBox="TYPES[type].viewBox"
      >
        <IconConfirm v-if="type === 'CONFIRM'" />
        <IconError v-if="type === 'ERROR'" />
        <IconInfo v-if="type === 'INFO'" />
        <IconDanger v-if="type === 'DANGER'" />
      </IconBase>
      <span v-html="text"></span>
    </div>
  </transition>
</template>

<script>

import {
  IconBase,
  IconConfirm,
  IconError,
  IconDanger,
  IconInfo,
} from "../Icons/index";

export default {
  name: 'app-notification',
  props: {
    type: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      TYPES: {
        CONFIRM: {
          class: "confirm",
          width: 20,
          height: 20,
          viewBox: "0 0 20 20",
        },
        ERROR: {
          class: "error",
          width: 18,
          height: 15,
          viewBox: "0 0 18 15",
        },
        DANGER: {
          class: "danger",
          width: 16,
          height: 16,
          viewBox: "0 0 16 16",
        },
        INFO: {
          class: "info",
          width: 16,
          height: 16,
          viewBox: "0 0 16 16",
        }
      }
    };
  },
  components: {
    IconBase,
    IconConfirm,
    IconError,
    IconDanger,
    IconInfo
  },
}

</script>

<style lang="sass" scoped>

@import "../assets/_vars"
*
  box-sizing: border-box
.app-notification
  position: fixed
  z-index: 1000
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
  display: flex
  justify-content: center
  align-items: center
  padding: 26px 24px
  max-width: 524px
  width: fit-content
  box-shadow: 0px 3px 14px rgba(55, 71, 79, 0.3)
  border-radius: 4px
  letter-spacing: 0.2px
  font-size: 16px
  line-height: 20px
  white-space: break-spaces
  &.confirm
    background: #F4FAF4
    color: #2E7D32
  &.error
    background: #FFF9F0
    color: #BF360C
  &.info
    background: $gray4
    color: $gray3
  &.danger
    background: #FFF5F7
    color: #B71C1C
  &-enter, &-leave-to
    opacity: 0
  &-enter-active
    animation: 0.3s fade forwards
  &-leave-active
    animation: 0.3s fade reverse
  svg
    margin-right: 10px
    min-width: 20px
@keyframes fade
  from
    opacity: 0
  to
    opacity: 1
</style>