<template>
  <div class="upload-image">
    <div
      class="upload-image__drag-area d-flex justify-content-center d-flex flex-column align-items-center"
      v-if="!file && !loading"
      @dragover.prevent
      @drop.prevent="$_onDrop"
    >
      <div class="cloud-icon">
        <font-awesome-icon icon="cloud-upload-alt" class="align-self-center" size="4x" />
      </div>
      <div class="d-flex align-items-center justify-content-center flex-column max-middle-text">
        <div>Solte sua foto em qualquer</div>
        <div>lugar para atualizar</div>
        <div>ou</div>
        <b-button
        :disabled="disabled"
          class="btn-default btn-blue btn shadow-none border-0"
          @click="$_onClick"
        >Escolher Foto</b-button>
        <span class="min-middle-text mt-1">Tamanho máximo para envio do arquivo: 10MB</span>
      </div>
    </div>
    <div
      v-else
      class="d-block w-100 mh-100 d-flex flex-wrap justify-content-center upload-image__preview"
      :class="preview_modifiers"
    >
    <span v-if="!disabled" class="text-white bg-danger background-danger delete-file" @click="remove()"> X </span>
      <img class="w-100" v-if="isImage" :src="filePreview" alt="image-preview" />

      <span v-else>
        <pdf-viewer :src="filePreview" />
      </span>
    </div>
      <p  class="text-center"> <strong>{{label}}</strong> </p>
  </div>
</template>

<script>
import NProgress from "nprogress/nprogress";
import { readFile, compressImage } from "../../utils/image";
import PdfViewer from "./PdfViewer";
const AVAILABLE_ENDPOINTS = ["/docs/upload-generic", "/docs"];

export default {
  name: "upload-file",
  components: {
    PdfViewer
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    autoUpload: {
      type: Boolean,
      default: false
    },
    fileUploadProps: {
      type: Object,
      default: () => ({})
    },
    fileUploadEndpoint: {
      type: String,
      default: "/docs/upload-generic",
      validator: value => AVAILABLE_ENDPOINTS.includes(value)
    },
    fileUploadName: {
      type: String,
      default: "file"
    },
    label:{
      type: String,
      default: "Arquivo"
    },
    value:{

    },
    fileInit: {},
    disabled:{
      type: Boolean,
      default: false
    }
  },
  computed: {
    preview_modifiers() {
      return {
        "upload-image__preview--loading": this.loading
      };
    },
    is_doc() {
      return this.fileUploadEndpoint === "/docs";
    },
    imagePreview() {
      if (this.isImage()) {
        return compressImage(readFile(this.file));
      }
      return "";
    },
    isImage() {
      if (!this.file) {
        return false;
      } else if (typeof this.file === "string") {
        return this.file.match(/\.(jpeg|jpg|gif|png)$/) != null;
      } else if (this.file["type"].split("/")[0] === "image") {
        return true;
      }

      return false;
    }
  },
  data: () => ({
    file: null,
    filePreview: "",
    loading: false
  }),

  mounted() {
    if (this.fileInit) {
      this.file = this.fileInit;
      this.filePreview = this.file;
       this.$emit("change", this.file);
    }
  },
  methods: {
    async $_setImage(file) {
      if (this.autoUpload) {
        this.loading = true;
      }

      try {
        this.file = file;

        if (this.isImage) {
          const image = await compressImage(await readFile(file));
          this.filePreview = image;
        } else {
          this.filePreview = await readFile(file);
        }
        if (this.autoUpload) {
          const fileData = await this.$_upload(image, this.fileUploadProps);

          if (fileData.status && fileData.status === "success") {
            if (this.is_doc) {
              this.$emit("change", fileData.body);
            } else {
              this.$emit("change", fileData.body.absolute_path);
            }
          }

          this.loading = false;
        } else {
          this.file = file;
          this.$emit("change", this.file);
        }
      } catch (e) {
        console.error(e);
        throw new Error(e);
      }
    },
    async $_upload(file, fileProps = {}) {
      NProgress.inc();
      const formData = new FormData();
      formData.append(this.fileUploadName, file);

      Object.keys(fileProps).forEach(item => {
        formData.append(item, fileProps[item]);
      });

      return fetch(`${process.env.YOUR_APY}${this.fileUploadEndpoint}`, {
        method: "POST",
        body: formData
      }).then(result => {
        NProgress.done();
        return result.json();
      });
    },
    $_onDrop(event) {
      const { dataTransfer } = event;
      const { files } = dataTransfer;

      this.$_setImage(files[0]);
    },
    $_onClick() {
      const elFile = document.createElement("input");
      elFile.type = "file";
      elFile.accept = "application/pdf,image/*";
      elFile.click();

      elFile.onchange = () => {
        this.$_setImage(elFile.files[0]);
      };
    },
    remove(){
      this.$emit('delete');
      this.$emit("change", null);
      this.file = null;
      this.filePreview = null;
      
    }
  }
};
</script>

<style scoped lang="scss">
.upload-image {
  width: 100%;

  &__drag-area {
    // cursor: pointer;
    width: 100%;
    border: 2px gray dashed;
    border-radius: 10px;
    height: 279px;
  }

  &__preview {
    &--loading {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}

.btn-blue {
  background: #ff9b64;
}

.cloud-icon {
  color: #ff9b64;
}

.min-middle-text {
  font-size: 9px;
  letter-spacing: 0.23px;
  color: #7a7a7a;
}

.max-middle-text {
  letter-spacing: 0.35px;
}

.delete-file{
  position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
</style>