import MindElixir from "https://cdn.jsdelivr.net/npm/mind-elixir@latest/dist/MindElixir.js";
import example from "https://cdn.jsdelivr.net/npm/mind-elixir@latest/dist/example.js";

function generateMainBranch({ pT, pL, pW, pH, cT, cL, cW, cH, direction, containerHeight }) {
  let x1 = pL + pW / 2
  const y1 = pT + pH / 2
  let x2
  if (direction === 'lhs') {
    x2 = cL + cW
  } else {
    x2 = cL
  }
  const y2 = cT + cH / 2
  const root = this.map.querySelector("me-root");
  if (this.direction === MindElixir.SIDE) {
    if (direction === "lhs") {
      x1 = x1 - root.offsetWidth / 8;
    } else {
      x1 = x1 + root.offsetWidth / 8;
    }
  }
  return `M ${x1} ${y1} V ${
    y2 > y1 ? y2 - 20 : y2 + 20
  } C ${x1} ${y2} ${x1} ${y2} ${x2 > x1 ? x1 + 20 : x1 - 20} ${y2} H ${x2}`;
}
function generateSubBranch({
  pT,
  pL,
  pW,
  pH,
  cT,
  cL,
  cW,
  cH,
  direction,
  isFirst
}) {
  const GAP = 30;
  const TURNPOINT_R = 8;
  let y1;
  if (isFirst) {
    y1 = pT + pH / 2;
  } else {
    y1 = pT + pH;
  }
  const y2 = cT + cH;
  let x1 = 0;
  let x2 = 0;
  let xMiddle = 0;
  if (direction === "lhs") {
    x1 = pL + GAP;
    x2 = cL;
    xMiddle = cL + cW;
  } else if (direction === "rhs") {
    x1 = pL + pW - GAP;
    x2 = cL + cW;
    xMiddle = cL;
  }

  if (y2 < y1 + 50 && y2 > y1 - 50) {
    // draw straight line if the distance is between +-50
    return `M ${x1} ${y1} H ${xMiddle} V ${y2} H ${x2}`;
  } else if (y2 >= y1) {
    // child bottom lower than parent
    return `M ${x1} ${y1} H ${xMiddle} V ${
      y2 - TURNPOINT_R
    } A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 ${x1 > x2 ? 1 : 0} ${
      x1 > x2 ? xMiddle - TURNPOINT_R : xMiddle + TURNPOINT_R
    } ${y2} H ${x2}`;
  } else {
    // child bottom higher than parent
    return `M ${x1} ${y1} H ${xMiddle} V ${
      y2 + TURNPOINT_R
    } A ${TURNPOINT_R} ${TURNPOINT_R} 0 0 ${x1 > x2 ? 0 : 1} ${
      x1 > x2 ? xMiddle - TURNPOINT_R : xMiddle + TURNPOINT_R
    } ${y2} H ${x2}`;
  }
}
let mind = new MindElixir({
  el: "#map",
  generateMainBranch,
  generateSubBranch
});
mind.init(example);
console.log(mind);