<template>
  <div>
  <vue-draggable :list="content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
    <div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid">
      <block-text v-if="block.type === 'text'"
                  :index="index"
                  :title.sync="block.data.title"
                  :text.sync="block.data.text"
                  v-on:remove="onBlockRemoved"/>
      <block-image-text v-if="block.type === 'image-text'"
                        :index="index"
                        :title.sync="block.data.title"
                        :text.sync="block.data.text"
                        :image-id.sync="block.data.image_id"
                        :image-url.sync="block.data.image_thumbnail_url"
                        v-on:remove="onBlockRemoved"
                        :access-token="$root.store.accessToken"/>
      <block-image v-if="block.type === 'image'"
                   :index="index"
                   :title.sync="block.data.title"
                   :image-id.sync="block.data.image_id"
                   :image-url.sync="block.data.image_thumbnail_url"
                   v-on:remove="onBlockRemoved"
                   :access-token="$root.store.accessToken"/>
      <block-images v-if="block.type === 'images'"
                    :index="index"
                    :title.sync="block.data.title"
                    :text.sync="block.data.text"
                    :images.sync="block.data.images"
                    v-on:remove="onBlockRemoved"
                    :access-token="$root.store.accessToken"/>
      <block-video v-if="block.type === 'video'"
                   :index="index"
                   :title.sync="block.data.title"
                   v-on:remove="onBlockRemoved"
                   :video-url.sync="block.data.video_url"/>
    </div>
  </vue-draggable>

  <block-add v-on:added="onBlockAdded"/>
  </div>
</template>

<script>
    import {api} from "../../js/modules/api";
    import Draggable from 'vuedraggable';
    import BlockText from './BlockText'
    import BlockImage from './BlockImage'
    import BlockImages from './BlockImages'
    import BlockImageText from './BlockImageText'
    import BlockVideo from './BlockVideo'
    import BlockAdd from "./BlockAdd"

    export default {
        name: 'block-content',
        props: ['content'],
        methods: {
            onBlockRemoved(blockIndex) {
                const remove = () => {
                    // Удаляем блок из Vue
                    content.splice(blockIndex, 1);
                    this.$emit('update:content', content);
                }
                const content = this.content;
                const blockToRemove = this.content[blockIndex];
                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
                if (blockToRemove.data.id) {
                    api.removeContentBlock(blockToRemove, this.$root.store.accessToken).then(response => {
                        remove();
                    });
                }
                else {
                    remove();
                }
            },
            onBlockAdded(blockData) {
              const content = this.content;
              content.push(blockData);
              this.$emit('update:content', content);
            },
        },

        components: {
            BlockAdd,
            'block-text': BlockText,
            'block-image': BlockImage,
            'block-image-text': BlockImageText,
            'block-images': BlockImages,
            'block-video': BlockVideo,
            'vue-draggable': Draggable,
        }
    }
</script>
