<template>
  <div style="background: rgba(255, 255, 255, 0)">
    <q-btn
      class=""
      flat
      label="Загрузить фото"
      no-caps
      rounded
      style="max-width: 120px; background-color: #0fab9d"
      @click="showDialog = true"
    ></q-btn>
    <my-upload
      v-model="showDialog"
      :class="{
        'cropper-mobile': !$q.screen.gt.sm,
        'light-theme': !dark,
        'dark-theme': dark,
      }"
      :dark="dark"
      :height="160"
      :lang-ext="langExt"
      :noRotate="false"
      :width="160"
      class="cropper"
      img-format="png,jpg,gif"
      @srcFileSet="srcFileSet"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
    ></my-upload>
  </div>
</template>
<script>
import gql from "graphql-tag";
import { print as printGraphQL } from "graphql/language/printer";
import { mapState } from "pinia";
import fetch from "cross-fetch";

import myUpload from "vue-image-crop-upload";
import "babel-polyfill"; // es6 shim
import { useUiStore } from "src/stores/UI";
import { useAuthStore } from "src/stores/auth";
import { instaliAvataron } from "src/queries/mutations";

export default {
  name: "ChangeAvatarDialog",
  components: { myUpload },
  props: {
    objId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      langExt: {
        hint: "Кликните или перенесите сюда файл изображения",
        loading: "Загружаю…",
        noSupported:
          "Браузер не поддерживается. Пожалуйста используйте IE10+ или другой браузер",
        success: "Загрузка успешна",
        fail: "Загрузка не удалась",
        preview: "Предпросмотр",
        btn: {
          off: "Отмена",
          close: "Закрыть",
          back: "Назад",
          save: "Сохранить",
        },
        error: {
          onlyImg: "Файл не является изображением",
          outOfSize: "Файл превышает лимит: ",
          lowestPx: "Файл слишком маленький. Должен быть больше: ",
        },
      },
      imgDataUrl: "",
      imgBlob: null,
      showDialog: false,
    };
  },
  methods: {
    srcFileSet(fileName, fileType, fileSize) {
      // console.log(arguments);
    },
    /**
     * crop success
     *
     * @param imgDataUrl
     * @param field
     */
    async cropSuccess(imgDataUrl, field) {
      this.imgDataUrl = imgDataUrl;
      await fetch(imgDataUrl)
        .then((res) => res.blob())
        .then((blob) => {
          this.imgBlob = blob;
        });
      this.submitAvataro();
    },
    /**
     * upload success
     *
     * @param jsonData  server api return data, already json encode
     * @param field
     */
    cropUploadSuccess(jsonData, field) {
      console.log("-------- upload success --------");
      console.log(jsonData);
      console.log("field: " + field);
    },
    /**
     * upload fail
     *
     * @param status    server api return error status, like 500
     * @param field
     */
    cropUploadFail(status, field) {
      console.log("-------- upload fail --------");
      console.log(status);
      console.log("field: " + field);
    },

    onReset() {
      this.showDialog = false;
    },

    postAvataro() {
      const formData = new FormData();
      formData.append("query", printGraphQL(instaliAvataron));
      formData.append("variables", JSON.stringify({ id: this.objId }));

      function blobToFile(blob, name) {
        function fileExtension(type) {
          if (type.startsWith("image")) {
            let ext = type.slice(6);
            if (ext === "jpeg") ext = "jpg";
            return ext;
          } else return "unknown";
        }

        return new File([blob], `${name}.${fileExtension(blob.type)}`, {
          type: blob.type,
        });
      }

      const baseFile = blobToFile(this.imgBlob, "baza");

      // тут проверяю получившиеся файлы. скачиваю чтоб пощупать
      /*
             function downloadFile(file){

               let url = URL.createObjectURL(file)
               let a = document.createElement('a');
               a.download = file.name;
               a.href = url;
               a.click();
               URL.revokeObjectURL(url);


             }
             downloadFile(baseFile)
      */

      formData.append("bildoBaza", baseFile);

      // formData.forEach((value, key) => console.log(key, value));
      const headers = {
        "Content-Type": "multipart/form-data",
      };
      if (this.jwt != "null" && this.jwt !== null) {
        headers["Authorization"] = `JWT ${this.jwt}`;
      }
      return this.$axios
        .post("", formData, {
          headers,
        })
        .then((response) => {
          const resp = response.data.data.instaliAvataron;
          if (resp.status) {
            this.$store.commit("siriusoauth/setAvatar", resp.avataro);
            return Promise.resolve(resp);
          } else {
            for (const key in resp.errors) {
              console.log(resp.errors[key].message);
            }
            // console.log(response);
            return Promise.reject(new Error(resp.message));
          }
        })
        .catch((e) => {
          return Promise.reject(e);
        });
    },

    submitAvataro() {
      const auth = useAuthStore();
      // this.postAvataro()

      //попытка перевести запрос с аксиос на аполло. Неудачно. Аполло не хочет принимать бинарники, а бакенд не хочет принимать base64

      // const params = {
      //   id: this.objId,
      //   baza: this.avatarBaseBlob,
      //   full: this.avatarMaxURLBlob,
      //   min: this.avatarMinURLBlob,
      // };
      // const formData = new FormData();
      // formData.append('variables', JSON.stringify({id: this.objId}));
      // formData.append('bildoBaza', this.avatarBaseBlob);
      // formData.append('bildoAvataro', this.avatarMaxURLBlob);
      // formData.append('bildoAvataroMin', this.avatarMinURLBlob);
      //
      // this.$store.dispatch('uzanto/changeAvatar', params)

      this.postAvataro()
        .then((resp) => {
          console.log(resp.message);
          auth.setAvataro(resp.avataro);
          this.showDialog = false;
        })
        .catch((e) => {
          console.error(e);
          this.showDialog = false;
        });
    },
  },
  computed: {
    ...mapState(useUiStore, ["dark"]),
    ...mapState(useAuthStore, ["jwt"]),
    cropperStyle: function () {
      if (this.dark) {
        return "dark-theme";
      } else {
        return "light-theme";
      }
    },
  },
};
</script>
<style lang="scss">
.cropper-mobile {
  .vicp-wrap {
    width: 291px;
    height: 550px;

    .vicp-step1 .vicp-drop-area {
      height: 250px;
    }

    .vicp-step2 .vicp-crop .vicp-crop-right {
      float: left;
      width: 240px;
    }
  }
}

.cropper {
  .vicp-wrap {
    .vicp-operate {
      a {
        color: darkblue;
      }
    }

    .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
      padding-right: 3px;
    }
  }
}

.dark-theme {
  .vicp-wrap {
    background: #121212;

    .vicp-operate {
      a {
        color: white;
      }
    }

    .vicp-step1 .vicp-drop-area .vicp-hint {
      color: darkgrey;
    }
  }
}

.light-theme {
  .vicp-wrap {
    background: white;

    .vicp-operate {
      a {
        color: #1d1d1d;
      }

      .vicp-step1 .vicp-drop-area .vicp-hint {
        color: darkgrey;
      }
    }
  }
}
</style>
