<template>
  <div name="block-image-text">
    <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" name="block-image-text-image"/>
      <div class="kit__fieldset">
        <div class="kit__field field">
          <div class="field__wrap field__wrap--title">
            <input type="text" name="block-image-text-title"
                   :value="title"
                   class="field__input"
                   placeholder="Заголовок раздела"
                   @change="onTitleChange">
          </div>
        </div>
        <div class="kit__field field">
          <div class="field__wrap" name="block-image-text-text-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(newValue) {
                this.$emit('update:text', newValue);
            },
            onUpdateImageUrl(newValue) {
                this.$emit('update:imageUrl', newValue);
            },
            onUpdateImageId(newValue) {
                this.$emit('update:imageId', newValue);
            },
        },
        components: {
            'lil-image': LilImage,
            'vue-redactor': VueRedactor,
        },
    }
</script>
