/**
 * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */
let formElements;
let activated = false; // Update image

const resize = (width, height, image) => {
  // The canvas where we will resize the image
  let canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(image, 0, 0, width, height); // The format

  const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension; // The quality

  const quality = formElements.resizeQuality.value; // Creating the data from the canvas

  Joomla.MediaManager.Edit.current.contents = canvas.toDataURL(`image/${format}`, quality); // Updating the preview element

  image.width = width;
  image.height = height;
  image.src = Joomla.MediaManager.Edit.current.contents; // Update the width input box

  formElements.resizeWidth.value = parseInt(width, 10); // Update the height input box

  formElements.resizeHeight.value = parseInt(height, 10); // Notify the app that a change has been made

  window.dispatchEvent(new Event('mediaManager.history.point'));
  canvas = null;
};

const addListeners = image => {
  // The listeners
  formElements.resizeWidth.addEventListener('change', ({
    target
  }) => {
    resize(parseInt(target.value, 10), parseInt(target.value, 10) / (image.width / image.height), image);
  });
  formElements.resizeHeight.addEventListener('change', ({
    target
  }) => {
    resize(parseInt(target.value, 10) * (image.width / image.height), parseInt(target.value, 10), image);
  });
};

const initResize = image => {
  // Update the input boxes
  formElements.resizeWidth.value = image.naturalWidth;
  formElements.resizeHeight.value = image.naturalHeight;

  if (!activated) {
    activated = true;
    addListeners(image);
  }
};

window.addEventListener('media-manager-edit-init', () => {
  // Get the form elements
  formElements = {
    resizeWidth: document.getElementById('jform_resize_width'),
    resizeHeight: document.getElementById('jform_resize_height'),
    resizeQuality: document.getElementById('jform_resize_quality')
  }; // Register the Events

  Joomla.MediaManager.Edit.plugins.resize = {
    Activate(image) {
      return new Promise((resolve
      /* , reject */
      ) => {
        // Initialize
        initResize(image);
        resolve();
      });
    },

    Deactivate() {
      return new Promise((resolve
      /* , reject */
      ) => {
        resolve();
      });
    }

  };
}, {
  once: true
});