<template>
  <div>
    <div>
      <label class="btn-solid-blue">
        Upload
        <input
          type="file"
          accept=".jpeg, .jpg, .gif, .png"
          value="Upload Photo"
          style="width: 0px; height: 0px; overflow: hidden"
          name="images[]"
          @change="imagesAdd"
          :multiple="allowMultiple"
          :disabled="!mayEdit"
        />
      </label>
    </div>
    <br />
    <div class="form-group row">
      <div v-for="(img, i) in image" class="col-md-2" :key="i">
        <input
          v-if="allowMultiple"
          type="checkbox"
          id="checkbox"
          name="checkbox"
          v-model="imagesDefault[i]"
          @change="updateList(i)"
          :disabled="!mayEdit"
        />
        <label v-if="allowMultiple" for="checkbox" style="margin: 10px"
          >Main Image</label
        >
        <img
          :src="img"
          style="height: 200px; width: 150px; object-fit: cover"
        />
        <br />
        <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
          <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
        </span>-->
        <button
          v-if="mayEdit"
          class="imageDeleteButton"
          @click="removeImage(i)"
        >
          <i class="fa fa-trash"></i>
        </button>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    loadedImages: Function,
    mayEdit: { type: Boolean, default: () => true },
    allowMultiple: { type: Boolean, default: () => true },
    savedImages: { type: Array, default: () => [] },
  },
  data() {
    return {
      images: {},
      image: [],
      imagesDefault: [],
      maxSavedIndex: 0,
    };
  },
  // Commented out for now.
  // created() {
  //   if (this.savedImages && this.savedImages.length > 0) {
  //     this.savedImages.forEach((element) => {
  //       this.images.push(element);
  //     });
  //   }
  // },
  methods: {
    imagesAdd(e) {
      if (!this.allowMultiple) {
        this.images = {};
        this.image = [];
      }

      const files = e.target.files || e.dataTransfer.files;

      for (let i = 0; i < files.length; i++) {
        if (files[i].size > 2097152) {
          alert(
            "One or more of your images are over 2 mb size. Please ensure that all your files are under 2 mb in size."
          );
          return;
        }
      }

      this.images = [];
      Array.prototype.push.apply(this.images, files);
      if (!this.images.length) return;

      this.createImage(this.images);
      this.loadedImages(this.image);
    },

    createImage(file) {
      for (let i = 0; i < file.length; i++) {
        const reader = new FileReader();
        var vm = this;

        reader.onload = (e) => {
          vm.image.push(e.target.result);
        };
        reader.readAsDataURL(file[i]);
      }
    },

    removeImage(key) {
      this.$emit("DeleteImage", key);
      this.image.splice(key, 1);
      this.images.splice(key, 1);

      if (!this.image.length) {
        this.$refs.im.value = "";
      }

      // if (key <= this.maxSavedIndex) {
      //   this.$emit("DeleteImage", key);
      // }
    },

    updateList(index) {
      if (this.imagesDefault) {
        for (let i = 0; i < this.imagesDefault.length; i++) {
          if (i !== index) {
            this.imagesDefault[i] = false;
          }
        }
        this.$emit("DefaultImage", index);
      }
    },
  },
  watch: {
    savedImages: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.image = [];
          this.imagesDefault = [];
          for (let i = 0; i < val.length; i++) {
            this.image.push(val[i].image);
            this.imagesDefault.push(val[i].isDefault);
            this.maxSavedIndex = i;
          }
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.imageDeleteButton {
  background: #d9534f;
  border-width: 0px;
  width: 150px;
  font-family: "Muli";
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 32px;
  border-radius: 2px;
  transition-duration: 5s;
  margin-top: 10px;
  color: #fff;
}

.imageDeleteButton:hover i {
  color: #000;
}
</style>
