<template>
  <div class="section">
    <div class="section__center center" v-if="lesson">
      <div class="kit">
        <div class="kit__go go">
          <a href="#" class="go__item" @click.prevent="goBack">
            <div class="go__arrow">
              <svg class="icon icon-arrow-left">
                <use xlink:href="/static/img/sprite.svg#icon-arrow-left"></use>
              </svg>
            </div>
            <div class="go__title">К списку уроков</div>
          </a>
        </div>
        <div class="kit__title title">{{ title }}</div>
        <div class="kit__section">
          <div class="kit__field field">
            <div class="field__wrap">
              <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
            </div>
          </div>
          <div class="kit__field field">
            <div class="field__wrap">
              <textarea class="field__input" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
            </div>
          </div>
        </div>
        <div v-for="(block, index) in lesson.content">
          <block-text v-if="block.type === 'text'"
                      :index="index"
                      :title.sync="block.data.title"
                      :text.sync="block.data.text"
                      v-on:remove="onBlockRemoved"
                      :access-token="accessToken"/>
          <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_url"
                            v-on:remove="onBlockRemoved"
                            :access-token="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_url"
                       v-on:remove="onBlockRemoved"
                       :access-token="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="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>
        <block-add v-on:added="onBlockAdded" />

        <div class="kit__foot">
          <button class="kit__submit btn btn_md" v-bind:class="{ loading: saving }">Сохранить</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

    export default {
        name: "lesson-redactor",
        props: ["lesson", "saving", "accessToken"],
        methods: {
            goBack() {
                this.$emit('back');
            },
            onBlockAdded(blockData) {
                this.lesson.content.push(blockData);
                this.$emit('update:lesson', this.lesson);
            },
            onBlockRemoved(blockIndex) {
                const blockToRemove = this.lesson.content[blockIndex];
                // Удаляем блок из Vue
                this.lesson.content.splice(blockIndex, 1);
                this.$emit('update:lesson', this.lesson);
                // Если блок уже был записан в БД, отправляем запрос на сервер на удаление блока из БД
                if (blockToRemove.data.id) {
                    api.removeContentBlock(blockToRemove, this.accessToken);
                }
            }
        },
        computed: {
            title() {
                return this.lesson && this.lesson.id ? 'Редактирование урока' : 'Создать урок';
            }
        },
        components: {
            BlockAdd,
            'block-text': BlockText,
            'block-image': BlockImage,
            'block-image-text': BlockImageText,
            'block-images': BlockImages,
            'block-video': BlockVideo,
        }
    }
</script>

<style scoped>

</style>