<template>
  <div class="kit__section">
    <div v-if="!isOpen" class="kit__add add">
      <button type="button" class="add__toggle" @click="isOpen = true">
                <span class="add__circle">
                  <svg class="icon icon-add-plus">
                    <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
                  </svg>
                </span>
        <span class="add__title">Добавить блок</span>
      </button>
    </div>
    <div v-if="isOpen" class="kit__add add open">
      <button type="button" class="add__toggle" @click="isOpen = false">
                <span class="add__circle">
                  <svg class="icon icon-add-plus">
                    <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
                  </svg>
                </span>
        <span class="add__title">Добавить блок</span>
      </button>
      <div class="add__list">
        <button class="add__btn" type="button" @click="addBlockText">
          <svg class="icon icon-text">
            <use xlink:href="/static/img/sprite.svg#icon-text"></use>
          </svg>
        </button>
        <button class="add__btn" type="button" @click="addBlockImage">
          <svg class="icon icon-image">
            <use xlink:href="/static/img/sprite.svg#icon-image"></use>
          </svg>
        </button>
        <button type="button" class="add__btn" @click="addBlockImageText">
          <svg class="icon icon-image-text">
            <use xlink:href="/static/img/sprite.svg#icon-image-text"></use>
          </svg>
        </button>
        <button type="button" class="add__btn" @click="addBlockImages">
          <svg class="icon icon-images">
            <use xlink:href="/static/img/sprite.svg#icon-images"></use>
          </svg>
        </button>
        <button type="button" class="add__btn" @click="addBlockVideo">
          <svg class="icon icon-video-stroke">
            <use xlink:href="/static/img/sprite.svg#icon-video-stroke"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
    import uuidv4 from 'uuid/v4';

    export default {
        name: "block-add",
        data() {
            return {
                isOpen: false
            }
        },
        methods: {
            add(blockData) {
                blockData.uuid = uuidv4();
                this.isOpen = false;
                this.$emit('added', blockData)
            },
            addBlockText() {
                this.add({
                    type: 'text',
                    data: {
                        title: '',
                        text: '',
                    }
                })
            },
            addBlockImage() {
                this.add({
                    type: 'image',
                    data: {
                        title: '',
                        image_id: null,
                        image_url: null,
                    }
                })
            },
            addBlockImageText() {
                this.add({
                    type: 'image-text',
                    data: {
                        title: '',
                        text: '',
                        image_id: null,
                        image_url: null,
                    }
                })
            },
            addBlockImages() {
                this.add({
                    type: 'images',
                    data: {
                        title: '',
                        text: '',
                        images: [],
                    }
                })
            },
            addBlockVideo() {
                this.add({
                    type: 'video',
                    data: {
                        title: '',
                        video_url: '',
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
