<template>
    <transition-group
        tag='div'
        name="flash-wrapper"
        class='alert-wrapper'
    >
        <flash
            v-for='(flash) in flashes'
            :key='flash.uid'
            :flash="flash"
            @onRemoveFlash="removeFlash($event)"
        ></flash>
    </transition-group>
</template>

<script>
export default {
    data: function () {
        return {
            uid: 1,

            flashes: []
        }
    },

    methods: {
        addFlash: function (flash) {
            flash.uid = this.uid++;

            this.flashes.push(flash)
        },

        removeFlash: function (flash) {
            let index = this.flashes.indexOf(flash)

            this.flashes.splice(index, 1)
        }
    }
}
</script>
