import Konva from "konva";
import { FF_DEV_3793, isFF } from "./feature-flags";

export function reverseCoordinates(r1, r2) {
  let r1X = r1.x;
  let r1Y = r1.y;
  let r2X = r2.x;
  let r2Y = r2.y;
  let d;

  if (r1X > r2X) {
    d = Math.abs(r1X - r2X);
    r1X = r2X;
    r2X = r1X + d;
  }

  if (r1Y > r2Y) {
    d = Math.abs(r1Y - r2Y);
    r1Y = r2Y;
    r2Y = r1Y + d;
  }
  /**
   * Return the corrected rect
   */
  return { x1: r1X, y1: r1Y, x2: r2X, y2: r2Y };
}

/**
 * Transform RGBA Canvas to Binary Matrix
 * @param {object} canvas
 * @param {object} shape
 */
export function canvasToBinaryMatrix(canvas, shape) {
  const currentLayer = canvas.stageRef.getLayers().filter((layer) => layer.attrs.id === shape.id);

  const canv = currentLayer[0].canvas.context;

  const initialArray = canv.getImageData(0, 0, canv.canvas.width, canv.canvas.height);

  const binaryMatrix = [];

  for (
    let i = 0;
    i < canvas.stageRef.bufferCanvas.context.canvas.width * canvas.stageRef.bufferCanvas.context.canvas.height * 4;
    i += 4
  ) {
    const alpha = initialArray.data[i + 0];
    const r = initialArray.data[i + 1];
    const g = initialArray.data[i + 2];
    const b = initialArray.data[i + 3];

    if (alpha > 0 || r > 0 || g > 0 || b > 0) {
      binaryMatrix.push(1);
    } else {
      binaryMatrix.push(0);
    }
  }

  return binaryMatrix;
}

/**
 * Apply transform to rect and calc bounding box around it
 * @param {{ x: number, y: number, width: number, height: number }} rect
 * @param {Konva.Transform} transform
 */
export function getBoundingBoxAfterTransform(rect, transform) {
  const points = [
    { x: rect.x, y: rect.y },
    { x: rect.x + rect.width, y: rect.y },
    { x: rect.x + rect.width, y: rect.y + rect.height },
    { x: rect.x, y: rect.y + rect.height },
  ];
  let minX;
  let minY;
  let maxX;
  let maxY;

  points.forEach((point) => {
    const transformed = transform.point(point);

    if (minX === undefined) {
      minX = maxX = transformed.x;
      minY = maxY = transformed.y;
    }
    minX = Math.min(minX, transformed.x);
    minY = Math.min(minY, transformed.y);
    maxX = Math.max(maxX, transformed.x);
    maxY = Math.max(maxY, transformed.y);
  });
  return {
    x: minX,
    y: minY,
    width: maxX - minX,
    height: maxY - minY,
  };
}

/**
 * Apply changes to rect (shift to (x, y) and rotate) and calc bounding box around it
 * @param {{ x: number, y: number, width: number, height: number }} rect
 * @param {{ x: number, y: number }} shiftPoint
 * @param {number} radRotation
 */
export function getBoundingBoxAfterChanges(rect, shiftPoint, radRotation = 0) {
  const transform = new Konva.Transform();

  transform.translate(shiftPoint.x, shiftPoint.y);
  transform.rotate(radRotation);
  return getBoundingBoxAfterTransform(rect, transform);
}

/**
 * Crop rect to fit into canvas with given dimensions
 * @param {{ x: number, y: number, width: number, height: number }} rect
 * @param {number} stageWidth
 * @param {number} stageHeight
 */
export function fixRectToFit(rect, stageWidth, stageHeight) {
  let { x, y, width, height } = rect;

  if (x < 0) {
    width += x;
    x = 0;
  } else if (x + width > stageWidth) {
    width = stageWidth - x;
  }

  if (y < 0) {
    height += y;
    y = 0;
  } else if (y + height > stageHeight) {
    height = stageHeight - y;
  }

  return { ...rect, x, y, width, height };
}

export function createDragBoundFunc(item, offset = { x: 0, y: 0 }) {
  const { parent: image } = item;

  return (pos) =>
    image.fixForZoomWrapper(pos, (pos) => {
      let { x, y } = pos;

      if (isFF(FF_DEV_3793)) {
        x = image.canvasToInternalX(x);
        y = image.canvasToInternalY(y);
      }

      x -= offset.x;
      y -= offset.y;
      const singleRegionDragging = item.selected || !item.inSelection;
      const { top, left, right, bottom } = item.bboxCoords;
      const { top: srTop, left: srLeft, right: srRight, bottom: srBottom } = image?.selectedRegionsBBox || {};
      const bbox = singleRegionDragging
        ? { x, y, width: right - left, height: bottom - top }
        : { x: srLeft - left + x, y: srTop - top + y, width: srRight - srLeft, height: srBottom - srTop };
      const fixed = isFF(FF_DEV_3793)
        ? fixRectToFit(bbox, 100, 100)
        : fixRectToFit(bbox, image.stageWidth, image.stageHeight);

      if (fixed.width !== bbox.width) {
        x += (fixed.width - bbox.width) * (fixed.x !== bbox.x ? -1 : 1);
      }

      if (fixed.height !== bbox.height) {
        y += (fixed.height - bbox.height) * (fixed.y !== bbox.y ? -1 : 1);
      }

      x += offset.x;
      y += offset.y;

      if (!isFF(FF_DEV_3793)) return { x, y };

      return { x: image.internalToCanvasX(x), y: image.internalToCanvasY(y) };
    });
}

/**
 * An image on the stage that is being labelled might be under some CSS transformations,
 * such as being zoomed in, negatively zoomed out, rotated, etc., while also being shown in a
 * viewport on top of the image that might cut parts of it off. For operations like the
 * Magic Wand we need to ultimately get raw pixel data of the image with these transforms applied.
 *
 * Unfortunately it is impossible to get the raw pixel values exhibiting the actual CSS
 * transforms for an Image via JavaScript. Instead, we have to take the original untransformed
 * image and blit it to a Canvas with similar transforms but done through the Canvas API,
 * then getting the transformed raw pixels.
 *
 * In addition, doing all of this on large images can burn performance cycles that can
 * make using tools like the Magic Wand onerous, so we also attempt to only transform & blit
 * the image to exactly the area currently being shown in the viewport, so that we don't
 * do wasted work.
 *
 * We currently support zoomed in, negative zoom, and images being scaled in their viewport.
 * We do not support rotated images currently with this method.
 *
 * @param {Image} img DOM Image object to ultimately get raw, transformed pixel values for.
 * @param {int} naturalWidth The actual size of the Image if it were loaded from disk and shown
 *  its full, real size.
 * @param {int} naturalHeight Same, but for the height.
 * @param imageDisplayedInBrowserWidth {int} When the image is displayed in an actual browser
 *  it can be shrunken or expanded based on its container and available screen real estate; this
 *  is that width.
 * @param imageDisplayedInBrowserHeight {int} Same, but for the height.
 * @param viewportWidth {int} The width in pixels of where the image is actually being displayed;
 *  this is different than the imageDisplayedInBrowserWidth as the size of the image might be
 *  clipped by the edges of the viewport when overflow: hidden is set, like looking through the
 *  edges of a window clipping a view of the world outside.
 * @param viewportHeight {int} Same, but for the height.
 * @param zoomScale {float} 1 if no zooming is happening, >1 if zooming is on, <1 if negatively
 *  zoomed outwards.
 * @param zoomingPositionX {float} If zoomed and panned away from the image origin at the upper
 *  left of the screen, relates negative float coordinates from that corner of the X value,
 *  where these coordinates are relative to the imageDisplayedInBrowserWidth values.
 * @param zoomingPositionY {float} Same, but for the height.
 * @param negativezoom {boolean} True If a template allows negative zooming (i.e. zooming outwards
 *  beyond the actual size of the image), and if the user is currently actually negative zooming,
 *  will be true.
 * @returns {[ImageData, Canvas]} Returns an array with the actual RGBA imagedata of the transformed
 *  image, as well as a Canvas with the transformed image drawn on it.
 */
export function getTransformedImageData(
  img,
  naturalWidth,
  naturalHeight,
  imageDisplayedInBrowserWidth,
  imageDisplayedInBrowserHeight,
  viewportWidth,
  viewportHeight,
  zoomScale,
  zoomingPositionX,
  zoomingPositionY,
  negativezoom,
) {
  // If negative zoom is on, the image as displayed in the browser could actually be
  // _smaller_ than the viewport. Get the minimum size between these when creating
  // our ultimate canvas.
  let canvasWidth;
  let canvasHeight;

  if (negativezoom) {
    canvasWidth = Math.min(viewportWidth, imageDisplayedInBrowserWidth);
    canvasHeight = Math.min(viewportHeight, imageDisplayedInBrowserHeight);
  } else {
    canvasWidth = viewportWidth;
    canvasHeight = viewportHeight;
  }

  const canvas = document.createElement("canvas");

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  const ctx = canvas.getContext("2d");

  const [viewportNaturalX, viewportNaturalY] = getActualZoomingPosition(
    naturalWidth,
    naturalHeight,
    imageDisplayedInBrowserWidth,
    imageDisplayedInBrowserHeight,
    zoomingPositionX,
    zoomingPositionY,
  );

  // The viewport dimensions are some percentage of the actual size of the image
  // shown in the browser; determine that then calculate the percentage dimension
  // of the viewport in natural coordinate space. If we are negative zooming then
  // the calculations are slightly different.
  let viewportNaturalWidth;
  let viewportNaturalHeight;

  if (negativezoom) {
    viewportNaturalWidth = naturalWidth;
    viewportNaturalHeight = naturalHeight;
  } else {
    viewportNaturalWidth = Math.ceil((viewportWidth / imageDisplayedInBrowserWidth) * naturalWidth);
    viewportNaturalHeight = Math.ceil((viewportHeight / imageDisplayedInBrowserHeight) * naturalHeight);
  }

  // Only draw the part of the image under transformations to the viewport that we will actually
  // use, so we can then efficiently get its pixel data for pixel-level tools.

  // Source dimensions.
  const sx = viewportNaturalX;
  const sy = viewportNaturalY;
  const sWidth = viewportNaturalWidth;
  const sHeight = viewportNaturalHeight;
  // Destination dimensions.
  const dx = 0;
  const dy = 0;
  const dWidth = canvasWidth;
  const dHeight = canvasHeight;

  ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

  // Now grab the transformed pixels from the canvas for the values to actual do Magic Wanding on.
  // If an exception is thrown then CORS cross domain headers are probably not configured
  // correctly.
  let transformedData;

  try {
    transformedData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  } catch (err) {
    const msg = "Please configure CORS cross-domain headers correctly for getting image labeling data";

    alert(msg);
    console.error(msg);
    throw msg;
  }

  return [transformedData, canvas];
}

/**
 * Given some image that we might be zoomed into, get its x and y values relative to the actual,
 * natural size of the image.
 *
 * @param {int} naturalWidth The actual size of the Image if it were loaded from disk and shown
 *  its full, real size.
 * @param {int} naturalHeight Same, but for the height.
 * @param imageDisplayedInBrowserWidth {int} When the image is displayed in an actual browser
 *  it can be shrunken or expanded based on its container and available screen real estate; this
 *  is that width.
 * @param imageDisplayedInBrowserHeight {int} Same, but for the height.
 * @param zoomingPositionX {float} If zoomed and panned away from the image origin at the upper
 *  left of the screen, relates negative float coordinates from that corner of the X value,
 *  where these coordinates are relative to the imageDisplayedInBrowserWidth values.
 * @param zoomingPositionY {float} Same, but for the height.
 * @returns {[int, int]} X and Y upper left position of where the zoom is relative to the actual,
 *  natural size of the image.
 */
export function getActualZoomingPosition(
  naturalWidth,
  naturalHeight,
  imageDisplayedInBrowserWidth,
  imageDisplayedInBrowserHeight,
  zoomingPositionX,
  zoomingPositionY,
) {
  // The zoomingPosition is actually relative to whatever size the image is
  // actually being displayed in the browser (which could be scaled down or up),
  // so turn it into a percentage then re-apply it to the full natural size to get the
  // correct upper-left pixel offsets.
  const zoomPercentageX = Math.abs(zoomingPositionX) / imageDisplayedInBrowserWidth;
  const zoomPercentageY = Math.abs(zoomingPositionY) / imageDisplayedInBrowserHeight;
  const viewportNaturalX = Math.floor(zoomPercentageX * naturalWidth);
  const viewportNaturalY = Math.floor(zoomPercentageY * naturalHeight);

  return [viewportNaturalX, viewportNaturalY];
}

/**
 * Map brightness percentage to a value between -1 and 1 (Konva brightness value).
 *
 * 100% brightness is 0, 400% brightness is 0.8.
 *
 * @param {number} brightnessPercent
 * @returns {number}
 */
export function mapKonvaBrightness(brightnessPercent) {
  if (brightnessPercent <= 100) {
    return (brightnessPercent - 100) / 100;
  }
  const normalized = (brightnessPercent - 100) / 300;
  return normalized ** 0.5 * 0.8;
}