<template>
  <div class="kit__section kit__section--block">
    <div class="kit__section-remove">
      <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__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"
                  :value="text"
                  placeholder="Описание"
                  @change="onTextChange"></textarea>
      </div>
    </div>
    <div class="kit__gallery">
      <div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
        <img :src="image.src" class="kit__pic">
        <button type="button" @click="onRemoveImage(index)">
          <svg class="icon icon-delete">
            <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
          </svg>
        </button>
      </div>
      <div class="kit__photo">
        <svg class="icon icon-add-plus">
          <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
        </svg>
        <input type="file" class="kit__file" multiple @change="onImageAdded">
      </div>
    </div>
  </div>
</template>

<script>
    import {api} from "../../js/modules/api";

    export default {
        name: "block-images",
        props: ["index", "title", "text", "images", "accessToken"],
        methods: {
            onTitleChange(event) {
                this.$emit('update:title', event.target.value);
            },
            onTextChange(event) {
                this.$emit('update:text', event.target.value);
            },
            onImageAdded(event) {
                Array.from(event.target.files).forEach((file) => {
                    let reader = new FileReader();
                    reader.onload = () => {
                        let images = this.images;
                        images.push({
                            src: reader.result,
                            loading: true,
                        });
                        this.$emit('update:images', images);

                        api.uploadImage(reader.result, this.accessToken)
                            .then((response) => {
                                let images = this.images;
                                images.forEach((image, index) => {
                                    if (image.src === reader.result) {
                                        images[index].img = response.data.id;
                                        images[index].loading = false;
                                        images[index].src = response.data.image;
                                    }
                                });
                                this.$emit('update:images', images);
                            })
                            .catch((error) => {
                                console.log('error', error);
                            });
                    };
                    if (file) {
                        reader.readAsDataURL(file);
                    }
                });
            },
            onRemove() {
                this.$emit('remove', this.index);
            },
            onRemoveImage(index) {
                let images = this.images;
                let id = images[index].img;
                images.splice(index, 1);
                this.$emit('update:images', images);

                api.removeImage(id, this.accessToken);
            }
        }
    }
</script>