<template>
  <modal>
    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title"></content-block-title-input>
    <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
      <component
        class="new-content-block-wizard__element-component"
        :is="type(element)"
        :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
        :element="element" v-bind="element" :index="index"
        v-on:change-type="changeType"
        v-on:link-change-url="changeLinkUrl"
        v-on:link-change-text="changeLinkText"
        v-on:video-change-url="changeVideoUrl"
      ></component>
      <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
        <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
                    class="new-content-block-wizard__trash-icon"></trash-icon>
      </a>

      <add-content-element class="new-content-block-wizard__add"
                           v-on:add-element="addElement"
                           :index="index"
      ></add-content-element>
    </div>

    <div slot="footer">
      <a class="button" v-on:click="saveContentBlock">Speichern</a>
      <a class="button" v-on:click="hideModal">Abbrechen</a>
    </div>
  </modal>
</template>

<script>
  import Modal from '@/components/Modal';
  import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
  import AddContentElement from '@/components/AddContentElement';
  import LinkForm from '@/components/content-forms/LinkForm';
  import VideoForm from '@/components/content-forms/VideoForm';
  import ImageForm from '@/components/content-forms/ImageForm';
  import DocumentForm from '@/components/content-forms/DocumentForm';
  import ExerciseForm from '@/components/content-forms/ExerciseForm';
  import TextForm from '@/components/content-forms/TextForm';
  import TrashIcon from '@/components/icons/TrashIcon';

  export default {
    components: {
      Modal,
      ContentBlockChooserWidget,
      ContentBlockTitleInput,
      AddContentElement,
      LinkForm,
      VideoForm,
      ImageForm,
      DocumentForm,
      ExerciseForm,
      TextForm,
      TrashIcon
    },

    methods: {
      type(element) {
        switch (element.type) {
          case 'link':
            return 'link-form';
          case 'video':
            return 'video-form';
          case 'image':
            return 'image-form';
          case 'text':
            return 'text-form';
          case 'exercise':
            return 'exercise-form';
          case 'document':
            return 'document-form';
        }
        return 'content-block-chooser-widget'
      },
      _updateProperty(value, index, key) {
        this.elements.splice(index, 1, {
          ...this.elements[index],
          [key]: value
        });
      },
      changeLinkUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeLinkText(value, index) {
        this._updateProperty(value, index, 'text')
      },
      changeVideoUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      removeElement(index) {
        this.elements.splice(index, 1);
      },
      addElement(index) {
        this.elements.splice(index + 1, 0, {})
      },
      updateTitle(title) {
        this.title = title;
      },
      changeType(index, type) {
        let el = {
          type: type
        };
        switch (type) {
          case 'link':
            el = {
              ...el,
              text: '',
              url: ''
            };
            break;
        }

        this.elements.splice(index, 1, el);
      },
      hideModal() {
        this.$store.dispatch('hideModal');
      },
      saveContentBlock() {
        this.$store.dispatch('saveContentBlock', {
          title: this.title,
          contents: this.elements
        });
      }
    },

    data() {
      return {
        title: '',
        elements: [
          {
            type: 'image'
          },
          {
            type: 'video',
            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
          },
          {
            type: 'video',
            url: 'https://vimeo.com/267384185'
          },
          {
            type: 'link'
          },
          {
            type: 'text'
          },
          {
            type: 'video'
          },
          {
            type: 'document'
          },
          {
            type: 'exercise'
          },
          {
            type: 'image'
          },
          {}
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .new-content-block-wizard {
    /* top level does not exist, because of the modal */

    &__element {
      display: grid;
      grid-template-columns: 1fr 50px;
      grid-auto-rows: auto;
      /*width: 95%; // reserve space for scrollbar*/
    }

    &__element-component {
      margin-bottom: 25px;
    }

    &__remove {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
    }

    &__trash-icon {
      width: 25px;
      height: 25px;
      fill: $color-grey;
      cursor: pointer;
      justify-self: center;
    }

    &__chooser {
      grid-column: 1 / span 2;
    }

    &__add {
      grid-column: 1 / span 2;
    }
  }
</style>
