import { debounce } from "../../utils/debounce";
import { wrapArray } from "../../utils/utilities";
import { Geometry } from "./Geometry";
import { RelationShape } from "./RelationShape";
import { createPropertyWatcher, DOMWatcher } from "./watchers";

const parentImagePropsWatch = {
  parent: [
    "zoomScale",
    "zoomingPositionX",
    "zoomingPositionY",
    "rotation",
    "currentImage",
    "containerWidth",
    "containerHeight",
    "canvasSize",
  ],
};

const obtainWatcher = (node) => {
  // that's a tricky way to get watcher also for an exact result instead of whole region
  // works for global classifications and per-regions
  const isResult = !!node.from_name;
  if (isResult) {
    return DOMWatcher;
  }

  switch (node.type) {
    case "richtextregion":
    case "paragraphs":
      return DOMWatcher;
    case "audioregion": {
      return createPropertyWatcher(["bboxTriggers"]);
    }
    case "rectangleregion":
      return createPropertyWatcher(["x", "y", "width", "height", "hidden", parentImagePropsWatch]);
    case "ellipseregion":
      return createPropertyWatcher(["x", "y", "radiusX", "radiusY", "rotation", "hidden", parentImagePropsWatch]);
    case "polygonregion":
      return createPropertyWatcher(["hidden", { points: ["x", "y"] }, parentImagePropsWatch]);
    case "vectorregion":
      return createPropertyWatcher(["hidden", "bbox", parentImagePropsWatch]);
    case "keypointregion":
      return createPropertyWatcher(["x", "y", "hidden", parentImagePropsWatch]);
    case "brushregion":
      return createPropertyWatcher(["needsUpdate", "hidden", "touchesLength", parentImagePropsWatch]);
    case "timeseriesregion":
      return createPropertyWatcher(["start", "end", { parent: ["zoomedRange"] }]);
    default:
      return null;
  }
};

const createShape = (node, root) => {
  return new RelationShape({
    root,
    element: node,
    watcher: obtainWatcher(node),
  });
};

const connect = (relation, root) => {
  return {
    id: relation.id,
    label: wrapArray(relation.labels ?? []).join(", "),
    color: "#fa541c",
    direction: relation.direction,
    start: createShape(relation.startNode, root),
    end: createShape(relation.endNode, root),
    onChange(callback) {
      const onChangedCallback = debounce(callback, 50);

      this.start.onUpdate(onChangedCallback);
      this.end.onUpdate(onChangedCallback);
    },
    destroy() {
      this.start.destroy();
      this.end.destroy();
    },
  };
};

/**
 * Calculate BBox for the shape
 * @param {RelationShape} shape
 * @param {HTMLOrSVGElement} root
 */
const calculateBBox = (shape, root) => {
  const { x, y } = Geometry.getDOMBBox(root, true) ?? { x: 0, y: 0 };
  const bboxList = shape.boundingBox();

  return bboxList.map((bbox) => {
    const padded = Geometry.padding(bbox, 3);

    return {
      ...padded,
      x: padded.x - x,
      y: padded.y - y,
    };
  });
};

const getNodesBBox = ({ start, end, root }) => {
  const [startBBox, endBBox] = Geometry.closestRects(calculateBBox(start, root), calculateBBox(end, root));

  return {
    start: startBBox,
    end: endBBox,
  };
};

const shapesIntersect = ({ x1, y1, w1, x2, y2, w2 }) => {
  if (y1 === y2) return false;

  const leftIntersection = x1 <= x2 && x2 <= x1 + w1;
  const rightIntersection = x1 <= x2 + w2 && x2 + w2 <= x1 + w1;

  return leftIntersection || rightIntersection;
};

const calculateTopPath = ({ x1, y1, w1, x2, y2, w2, limit }) => {
  const xw1 = x1 + w1 * 0.5;
  const xw2 = x2 + w2 * 0.5;

  const top = Math.min(y1, y2) - limit;
  const l1 = Math.min(top, y1 - limit);
  const l2 = Math.min(top, y2 - limit);

  const toEnd = xw1 < xw2;

  return { x1: xw1, x2: xw2, y1, y2, l1, l2, toEnd };
};

const calculateSidePath = ({ x1, y1, w1, h1, x2, y2, w2, h2, limit }) => {
  let renderingSide = "left";

  if (Math.min(x1, x2) - limit < 0) {
    renderingSide = "right";
  }

  let xs1;
  let xs2;
  let ys1;
  let ys2;
  let l1;
  let l2;

  if (renderingSide === "left") {
    xs1 = x1;
    ys1 = y1 + h1 * 0.5;
    xs2 = x2;
    ys2 = y2 + h2 * 0.5;
    const left = Math.min(xs1, xs2) - limit;

    l1 = Math.min(left, xs1 - limit);
    l2 = Math.min(left, xs2 - limit);
  } else {
    xs1 = x1 + w1;
    ys1 = y1 + h1 * 0.5;
    xs2 = x2 + w2;
    ys2 = y2 + h2 * 0.5;
    const left = Math.max(xs1, xs2) + limit;

    l1 = Math.max(left, xs1 + limit);
    l2 = Math.max(left, xs2 + limit);
  }

  const toEnd = ys1 < ys2;

  return { x1: xs1, x2: xs2, y1: ys1, y2: ys2, l1, l2, toEnd, renderingSide };
};

const buildPathCommand = ({ x1, y1, x2, y2, l1, l2, toEnd, renderingSide }, orientation) => {
  const radius = 5;
  const vertical = orientation === "vertical";

  let px1;
  let py1;
  let px2;
  let py2;
  let px3;
  let py3;
  let px4;
  let py4;
  let sweep;
  let arc1;
  let arc2;
  let ex;
  let ey;

  if (vertical) {
    px1 = x1;
    py1 = y1;
    px2 = x1;
    py2 = l1 + radius;
    px3 = x2 + radius * (toEnd ? -1 : 1);
    py3 = l2;
    px4 = x2;
    py4 = y2;
    sweep = toEnd ? 1 : 0;
    arc1 = toEnd ? `${radius} -${radius}` : `-${radius} -${radius}`;
    arc2 = toEnd ? `${radius} ${radius}` : `-${radius} ${radius}`;

    // Edge center coordinates
    ex = Math.min(x1, x2) + Math.abs(x2 - x1) / 2;
    ey = l1;
  } else if (!vertical && renderingSide === "right") {
    px1 = x1;
    py1 = y1;
    px2 = l1 - radius;
    py2 = y1;
    px3 = l2;
    py3 = y2 + radius * (toEnd ? -1 : 1);
    px4 = x2;
    py4 = y2;
    sweep = toEnd ? 1 : 0;
    arc1 = toEnd ? `${radius} ${radius}` : `${radius} -${radius}`;
    arc2 = toEnd ? `-${radius} ${radius}` : `-${radius} -${radius}`;

    // Edge center coordinates
    ex = l1;
    ey = Math.min(y1, y2) + Math.abs(y2 - y1) / 2;
  } else if (!vertical && renderingSide === "left") {
    px1 = x1;
    py1 = y1;
    px2 = l1 + radius;
    py2 = y1;
    px3 = l2;
    py3 = y2 + radius * (toEnd ? -1 : 1);
    px4 = x2;
    py4 = y2;
    sweep = toEnd ? 0 : 1;
    arc1 = toEnd ? `-${radius} ${radius}` : `-${radius} -${radius}`;
    arc2 = toEnd ? `${radius} ${radius}` : `${radius} -${radius}`;

    // Edge center coordinates
    ex = l1;
    ey = Math.min(y1, y2) + Math.abs(y2 - y1) / 2;
  }

  const pathCommand = [
    `M ${px1} ${py1}`,
    `${px2} ${py2}`,
    `a 5 5 0 0 ${sweep} ${arc1}`, // rounded corner
    `L ${px3} ${py3}`,
    `a 5 5 0 0 ${sweep} ${arc2}`, // rounded corner
    `L ${px4} ${py4}`,
  ];

  return [pathCommand.join(" "), [ex, ey]];
};

const calculatePath = (start, end) => {
  const { x: x1, y: y1, width: w1, height: h1 } = start;
  const { x: x2, y: y2, width: w2, height: h2 } = end;

  const limit = 15;

  const intersecting = shapesIntersect({
    x1,
    y1,
    w1,
    x2,
    y2,
    w2,
  });

  const coordinatesCalculator = intersecting ? calculateSidePath : calculateTopPath;
  const coordinates = coordinatesCalculator({
    x1,
    y1,
    w1,
    h1,
    x2,
    y2,
    w2,
    h2,
    limit,
  });

  const pathCommand = buildPathCommand(coordinates, intersecting ? "horizontal" : "vertical");

  return pathCommand;
};

export default {
  obtainWatcher,
  createShape,
  connect,
  getNodesBBox,
  calculatePath,
  calculateBBox,
};