import { maxImageDimensions } from './config';

// Polyfill for IE11
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
export const canvasToBlobPolyfill = (fileType, fileName) => {
  if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value(callback, type, quality) {
        const canvas = this;
        setTimeout(function() {
          const binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
          const len = binStr.length;
          const arr = new Uint8Array(len);

          for (let i = 0; i < len; i += 1) {
            arr[i] = binStr.charCodeAt(i);
          }

          callback(new Blob([arr], { type: fileType, name: fileName }));
        });
      },
    });
  }
};

const createImage = url =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', error => reject(error));
    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
    image.src = url;
  });

/**
 * Taken from the ReadMe at https://github.com/DominicTobias/react-image-crop
 * @param {File} image - Image File url
 * @param {Object} crop - crop Object provided by react-easy-crop
 */
async function getCroppedImg(imageSrc, crop, fileType) {
  const image = await createImage(imageSrc);
  const canvas = document.createElement('canvas');
  const scaleX = image.naturalWidth / image.width;
  const scaleY = image.naturalHeight / image.height;
  canvas.width = crop.width;
  canvas.height = crop.height;
  const ctx = canvas.getContext('2d');

  // fill canvas in white to prevent black backgrounds on jpg images
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.drawImage(
    image,
    crop.x * scaleX,
    crop.y * scaleY,
    crop.width * scaleX,
    crop.height * scaleY,
    0,
    0,
    crop.width,
    crop.height
  );

  canvasToBlobPolyfill(fileType);

  // As a blob
  return new Promise(resolve => {
    canvas.toBlob(
      blob => {
        if (blob) {
          blob.height = crop.height;
          blob.width = crop.width;
          resolve(blob);
        }
      },
      fileType,
      1
    );
  });
}

/**
 * Takes the file and creates a FileReader to read contents before attaching it to the created Image src
 * @param {File} file
 */
const readImageFile = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.addEventListener(
      'load',
      () => {
        const img = new Image();

        img.addEventListener('load', () => {
          resolve({ imageSrc: reader.result });
        });
        img.addEventListener('error', error => reject(error));

        img.src = reader.result;
      },
      false
    );

    reader.addEventListener('error', error => reject(error));
    reader.readAsDataURL(file);
  });

/**
 * Return true if the supplied file size does not exceed to supplied limit.
 * @param {Number} fileSize - file size of supplied file
 * @param {Number} kbLimit - limit to check file size against in kilobytes
 */
const validateFileSizeLimit = (fileSize, kbLimit) => fileSize < kbLimit * 1024;

/**
 * Return true if the supplied file dimensions do not exceed max dimensions supplied by config.
 * @param {File} image - the image file after it has been cropped
 * @param {String} type - the image type to get correct max dimensions
 */
const validateImageDimensions = (image, imageType) => {
  const { maxWidth, maxHeight } = maxImageDimensions[imageType];
  return image.width < maxWidth || image.height < maxHeight;
};

export {
  createImage,
  getCroppedImg,
  readImageFile,
  validateFileSizeLimit,
  maxImageDimensions,
  validateImageDimensions,
};