<template>
    <div class="alert-stack">
        <transition-group name="fade" tag="div">
            <alert-box v-for="(alert, index) in getAlerts" :key="alertKey(alert, index)" :message="alert.message" :title="alert.title" :type="alert.type" @dismiss="dismiss(index)">
                {{ alert.title }}
            </alert-box>

        </transition-group>

        
    </div>
</template>
<script>
import alertBox from './alertBox.vue';
export default {
    components:{
        alertBox
    },
    methods:{
        alertKey(alert, index){
            return `${alert?.title || 'alert'}-${alert?.message || ''}-${index}`;
        },
        dismiss(index){
            this.$store.commit('dismissAlert', index);
        }
    },
    computed:{
        getAlerts(){
            return this.$store.getters.getAlerts;
        }
    },
    
}
</script>
<style>
.alert-stack{
    position: fixed;
    right: 0;
    top: 70px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}
.alert-stack > div {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media screen and (max-width: 768px){
    .alert-stack{
        top: 0;
        right: 0;
        left: 0;
        align-items: stretch;
    }
}
.fade-enter-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
