<template>
  <div class="kit__section kit__section--block">
    <div class="kit__section-remove">
      <button class="sortable__handle" type="button">
        <svg class="icon icon-hamburger">
          <use xlink:href="/static/img/sprite.svg#icon-hamburger"></use>
        </svg>
      </button>
      <button type="button" @click="onRemove">
        <svg class="icon icon-delete">
          <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
        </svg>
      </button>
    </div>
    <div class="kit__row">
      <lil-image :image-id="imageId" :image-url="imageUrl" v-on:update:imageUrl="onUpdateImageUrl"
                 v-on:update:imageId="onUpdateImageId" :access-token="accessToken"/>
      <div class="kit__fieldset">
        <div class="kit__field field">
          <div class="field__wrap field__wrap--title">
            <input type="text"
                   :value="title"
                   class="field__input"
                   placeholder="Заголовок раздела"
                   @change="onTitleChange">
          </div>
        </div>
        <div class="kit__field field">
          <div class="field__wrap">
            <vue-redactor :value="text" v-on:update:value="onTextChange" placeholder="Описание"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import LilImage from "./Image";
    import VueRedactor from '../redactor/VueRedactor';

    export default {
        name: "block-image-text",
        props: ["index", "title", "text", "imageUrl", "imageId", "accessToken"],
        methods: {
            onTitleChange(event) {
                this.$emit('update:title', event.target.value);
            },
            onTextChange(event) {
                this.$emit('update:text', event.target.value);
            },
            onUpdateImageUrl(newValue) {
                this.$emit('update:imageUrl', newValue);
            },
            onUpdateImageId(newValue) {
                this.$emit('update:imageId', newValue);
            },
            onRemove() {
                this.$emit('remove', this.index);
            }
        },
        components: {
            'lil-image': LilImage,
            'vue-redactor': VueRedactor,
        },
    }
</script>
