<template>
  <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">
            <textarea class="field__textarea field__textarea_sm"
                      placeholder="Описание"
                      :value="text"
                      v-autosize="text"
                      @change="onTextChange"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import LilImage from "./Image";

    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);
            },
        },
        components: {
            'lil-image': LilImage,
        },
    }
</script>
