<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<div id="app" class="wraper">
      <button @click="setElement">Change position</button>
      <button @click="changeCollors">Color</button>
      <button @click="changeItemss">Items</button>
      <transition-group name="fade" class="__mesages_list">
        <section class="first-item" :class="[firstItem[message.currentElementId].class, changColor[message.colorId].class]" v-bind:style="{ animation: fadeOut }" v-on:animationend="onAnimationEnd" v-for="message in messages" :key="message.id">
          <img class="first-item__img" src="img/infocircle.png" :src="changColor[message.colorId].img">
          <p class="first-item__text">{{message.id}}</p>
          <div class="first-item__progress" v-bind:style="{ animation: runProgress }" v-on:animationend="onAnimationEnd"></div>
        </section>
      </transition-group>
    </div>

@import url(nulstyle.scss);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);

.first-item { 
  display: flex;
  align-items: center;
  height: 8.156vh;
  width: 28.242vw;
  opacity: 0.7;
  filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
  box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1.389vh);
  border-radius: 2.389vh;
  overflow: hidden; 
  position: relative; 
  margin-bottom: 0.8vh;
}
 
.messages_list {
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  top: 80px;
  right: 16px;
 }

.first-item__img {
  height: 5.556vh;
  width: 5.556vh; 
  padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 1.8370vh;
  line-height: 1.3;
  display: flex;
  align-items: center;
  letter-spacing: -0.05em;
  color: #FFFFFF;
  text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
  padding-top: 2.189vh;
  margin-top: 0;
  &.error {
    background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
  } 
  &.greay {
    background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
  }
}
 
 .first-item__progress {
  position: absolute;
  bottom: 0px;
  width: 0%;
  border-bottom: 0.512vh solid #FFFFFF;;
 }

 .first-item {
  -webkit-animation: fadeOut 5s linear forwards;
  -moz-animation: fadeOut 5s linear forwards;
  -o-animation: fadeOut 5s linear forwards;
  -ms-animation: fadeOut 5s linear forwards;
  animation: fadeOut 5s linear forwards;
}

.first-item__progress {
  -webkit-animation: runProgress 5s linear forwards;
  -moz-animation: runProgress 5s linear forwards;
  -o-animation: runProgress 5s linear forwards;
  -ms-animation: runProgress 5s linear forwards;
  animation: runProgress 5s linear forwards;
}

@-webkit-keyframes fadeOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; -webkit-transform: translateY(0px);}
  100% { opacity: 0; -webkit-transform: translateY(-25px);}
}
 
@-webkit-keyframes runProgress {
  0%{ width: 0%; }
  100%{ width: 100%; }
}
 
@-moz-keyframes runProgress {
  0%{ width: 0%; }
  100%{ width: 100%; }
}
 
@-o-keyframes runProgress {
  0%{ width: 0%; }
  100%{ width: 100%; }
}
 
@-ms-keyframes runProgress {
  0%{ width: 0%; }
  100%{ width: 100%; }
}
 
@keyframes runProgress {
  0%{ width: 0%; }
  100%{ width: 100%; }
}



.top-left {
  position: relative;
  left: 10px;
}
 
.top-center {
  position: relative;
  left: calc(50% - 28.242vw / 2);
}

.top-right {
  position: relative;
  left: calc(99% - 28.242vw);
}

.midle-left {
  position: relative;
  top: calc(50% - 8.156vh);
}

.midle-center {
  position: relative;
  top: calc(50% - 8.156vh);
  left: calc(50% - 28.242vw / 2);
}

.midle-right {
  position: relative;
  top: calc(50% - 8.156vh);
  left: calc(99% - 28.242vw);
}

.footer-left {
  position: relative;
  top: calc(99% - 8.156vh);
}

.footer-center {
  position: relative;
  top: calc(99% - 8.156vh);
  left: calc(50% - 28.242vw / 2);
}

.footer-right {
  position: relative;
  top: calc(99% - 8.156vh);
  left: calc(99% - 28.242vw);
}

.blue-color {
  background: linear-gradient(90.49deg, #007EFF 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.green-color {
  background: linear-gradient(90.49deg, #6FDE00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.grey-color {
  background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.orange-color {
  background: linear-gradient(90.49deg, #FF6B00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.red-color {
  background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

const app = new Vue({
  el: '#app',
  props: {
    timeout: {
      type: Number,
      default: 5000
    }
  },
  data() {
    return {
      currentElement: 0,
      value: null,
      fadeOut: null,
      runProgress: null,
      animate: false,
      firstItem: [{
          class: 'top-left',
        },
        {
          class: 'top-center',
        },
        {
          class: 'top-right',
        },
        {
          class: 'midle-left',
        },
        {
          class: 'midle-center',
        },
        {
          class: 'midle-right',
        },
        {
          class: 'footer-left',
        },
        {
          class: 'footer-center',
        },
        {
          class: 'footer-right',
        },
      ],
      color: 0,
      changColor: [{
          class: 'blue-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'green-color',
          img: 'img/accept.png'
        },
        {
          class: 'grey-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'orange-color',
          img: 'img/warning.png'
        },
        {
          class: 'red-color',
          img: 'img/X.png'
        },
      ],
      messages: []
    }
  },
  methods: {
    setElement() {
      this.currentElement += 1
    },
    changeCollors() {
      this.color += 1
    },
    changeFadeOut: function() {
      this.fadeOut = `fadeOut ${this.timeout}ms linear forwards`
      this.runProgress = `runProgress ${this.timeout}ms linear forwards`
      this.animate = true
    },
    onAnimationEnd: function() {
      setTimeout(() => this.animate = false, 1000);
    },
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
      this.messages.unshift({
        id: timeStamp,
        colorId: this.color,
        currentElementId: this.currentElement
      })
    },
    hideNotification() {
      setTimeout(function() {
        app.messages.splice(app.messages.length - 1, 1)
      }, app.timeout)
    }
  },
  watch: {
    messages() {
      this.hideNotification()
    }
  },
  mounted() {
    this.hideNotification()
  }
});