<template>
    <div class="collapse">
        <slot></slot>
    </div>   
</template>
<script>
import Vue from 'vue'
export default {
    name: 'MwCollapse',
    props: {
        accordion: { type: Boolean, default: false, },
        selected: { type: [String, Array] }
    },
    methods: {
        findItemElement(selected) {
            let vm;
            this.$children.forEach((element) => {
                if ( element && element.$options.name === 'MwCollapseItem'
                    && selected.includes(element.name) ) {
                        vm = element;
                }
            });
            return vm;
        },
        listenUpdateSelected() {
            this.eventHub.$on('update:selected', (vm, names)=> {
                this.$emit('update:selected', names);
            });
        },
        listenAddUpdateSelected() {
            this.eventHub.$on('update:addSelected', (vm, name)=> {
                let selectedBackup;
                if (this.accordion) {
                    selectedBackup = name;
                } else {
                    selectedBackup = JSON.parse(JSON.stringify(this.selected));
                    selectedBackup.push(name);
                }
                this.eventHub.$emit('update:selected', vm, selectedBackup);
            });
        },
        listenRemoveUpdateSelected() {
            this.eventHub.$on('update:removeSelected', (vm, name)=> {
                let selectedBackup;
                if (this.accordion) {
                    selectedBackup = '';
                } else {
                    selectedBackup = JSON.parse(JSON.stringify(this.selected));
                    let index = selectedBackup.indexOf(name);
                    selectedBackup.splice(index, 1);
                }
                this.eventHub.$emit('update:selected', vm, selectedBackup);
            });
        },
        emitSignal() {
            let vm = this.findItemElement(this.selected)
            this.eventHub.$emit('update:selected', vm, this.selected);
        },
    },
    data() {
        return {eventHub: new Vue(),}
    },
    provide() {
        if (this.selected) {
            return { eventHub: this.eventHub };
        } else {
            return { eventHub: undefined }
        }
    },
    mounted() {
        if (!this.eventHub || !this.selected) { return }
        this.listenUpdateSelected();
        this.listenAddUpdateSelected();
        this.listenRemoveUpdateSelected();
        this.emitSignal();
    }
}
</script>
<style lang="scss" scoped>
    .collapse {
    }
</style>
