export async function uploadImage(
  opt: UploadImageVariables,
): Promise<UploadImageResponse> {
  const response = await instance.post<UploadImageResponse>(
    uploadImageURL,
    opt.uploadImageInput,
  );

  var uploadUrl = response.data.signedUrl;

  const imageFilePath = opt.path;
  const ImageResponse = await fetch(imageFilePath);
  const imageBlob = await ImageResponse.blob();

  await axios.put(uploadUrl, imageBlob, {
    headers: {
      ...response.data.requestHeaders,
      'Content-Type': opt.uploadImageInput.contentType,
      'Content-Length': imageBlob.size.toString(),
    },
  });

  return response.data;
}

export async function uploadImage(
  opt: UploadImageVariables,
): Promise<UploadImageResponse> {
  const response = await instance.post<UploadImageResponse>(
    uploadImageURL,
    opt.uploadImageInput,
  );

  var uploadUrl = response.data.signedUrl;

  const imageFilePath = opt.path;
  const ImageResponse = await fetch(imageFilePath);
  const imageBlob = await ImageResponse.blob();

  await fetch(uploadUrl, {
    method: 'PUT',
    headers: {
      ...response.data.requestHeaders,
      'Content-Type': opt.uploadImageInput.contentType,
      'Content-Length': imageBlob.size.toString(),
    },
    body: imageBlob,
  });

  return response.data;
}

export async function uploadImage(
  opt: UploadImageVariables,
): Promise<UploadImageResponse> {
  const response = await instance.post<UploadImageResponse>(
    uploadImageURL,
    opt.uploadImageInput,
  );

  var uploadUrl = response.data.signedUrl;

  const imageFilePath = opt.path;
  const ImageResponse = await fetch(imageFilePath);
  const imageBlob = await ImageResponse.blob();

  await uploadObjectToS3(uploadUrl, imageBlob, {
    ...response.data.requestHeaders,
    'Content-Type': opt.uploadImageInput.contentType,
    'Content-Length': imageBlob.size.toString(),
  });

  return response.data;
}

// axios don't upload the blob, so we are using the XMLHttpRequest
// https://github.com/axios/axios/issues/3442
const uploadObjectToS3 = (
  uploadUrl: string,
  blob: Blob,
  headers?: Record<string, string>,
  onProgress?: (event: ProgressEvent) => void,
) => {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();

    xhr.open('PUT', uploadUrl);

    xhr.onerror = (err): void => {
      reject({
        status: xhr.status,
        statusText: xhr.statusText,
        ...err,
      });
    };

    xhr.upload.onerror = (arg): void => {
      console.error('ERR upload error', arg);
    };

    xhr.upload.onprogress = (evt): void => {
      console.log(Math.round((evt.loaded / evt.total) * 100) + '%');

      onProgress?.(evt);
    };

    xhr.onload = (ev): void => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText,
        });
      }
    };

    if (headers) {
      Object.entries(headers).forEach(([key, value]) => {
        xhr.setRequestHeader(key, value);
      });
    }

    xhr.send(blob);
  });
};