<template>
    <button
        class="cw-block-adder-area"
        :class="{ 'cw-block-adder-active': adderActive }"
        :aria-pressed="adderActive"
        @click="selectBlockAdder"
    >
        <studip-icon v-show="!adderActive" shape="add" />
        <studip-icon v-show="adderActive" shape="add" role="info_alt"/>
        <span v-show="!adderActive"><translate>Block zu diesem Abschnitt hinzufügen</translate></span>
        <span v-show="adderActive"><translate>Abschnitt aktiv - Blöcke werden hier eingefügt</translate></span>
    </button>
</template>

<script>
import StudipIcon from '../StudipIcon.vue';
export default {
  components: { StudipIcon },
    name: 'courseware-block-adder-area',
    props: {
        container: Object,
        section: Number,
    },
    data() {
        return {
            adderActive: false,
        };
    },
    computed: {
        adderDisable() {
            return Object.keys(this.$store.getters.blockAdder).length !== 0 && !this.adderActive;
        },
        adderStorage() {
            return this.$store.getters.blockAdder;
        },
    },
    methods: {
        selectBlockAdder() {
            if (this.adderActive) {
                this.adderActive = false;
                this.$store.dispatch('coursewareBlockAdder', {});
            } else {
                this.adderActive = true;
                this.$store.dispatch('coursewareBlockAdder', { container: this.container, section: this.section });
                this.$store.dispatch('coursewareSelectedToolbarItem', 'blockadder');
                this.$store.dispatch('coursewareShowToolbar', true);
            }
        },
    },
    watch: {
        adderStorage(newValue, oldValue) {
            if (Object.keys(newValue).length === 0) {
                this.adderActive = false;
                this.$emit('updateContainerContent', oldValue);
            } else {
                if (newValue.container && newValue.container.id === this.container.id && newValue.section === this.section) {
                    this.adderActive = true;
                } else {
                    this.adderActive = false;
                }
            }
        },
    },
};
</script>
