<template>
  <div>
    <div v-if="! noTitle" class="kit__field field">
      <div class="field__wrap field__wrap--title">
        <input :readonly="readOnly" type="text"
               :value="title"
               class="field__input"
               placeholder="Заголовок раздела"
               @change="onTitleChange">
      </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.image_thumbnail_url" class="kit__pic">
        <button class="kit__delete-photo" 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", "images", "accessToken", "readOnly", "longSide", "noTitle"],
        methods: {
            onTitleChange(event) {
                this.$emit('update:title', event.target.value);
            },
            onImageAdded(event) {
                const longSide = +this.longSide || 1600;
                Array.from(event.target.files).forEach((file) => {
                    let reader = new FileReader();
                    reader.onload = () => {
                        let images = this.images;

                        images.push({
                            loading: true,
                        });
                        this.$emit('update:images', images);
                        const index = images.length - 1;

                        api.uploadImage(reader.result, this.accessToken)
                            .then((response) => {
                                let images = this.images;
                                images[index].image_id = response.data.id;
                                images[index].loading = false;
                                images[index].image_url = response.data.image;
                                images[index].image_thumbnail_url = response.data.image_thumbnail;
                                this.$emit('update:images', images);
                            })
                            .catch((error) => {
                                console.log('error', error);
                            });
                    };
                    if (file) {
                        reader.readAsDataURL(file);
                    }
                });
            },
            onRemoveImage(index) {
                let images = this.images;
                let id = images[index].image_id;

                api.removeImage(id, this.accessToken)
                    .then(response => {
                        images.splice(index, 1);
                        this.$emit('update:images', images);
                    });
            }
        }
    }
</script>
