// Dom Nodes
const amoeba = {
  parent: {
    membrane: document.querySelector('#js-parent-membrane'),
    core: document.querySelector('#js-parent-core'),
    ectoplasm: document.querySelectorAll('#js-parent-core > circle')[0],
    nucleus: document.querySelectorAll('#js-parent-core > circle')[1],
  },
  child: {
    ectoplasm: document.querySelector('#js-child-ectoplasm'),
    membrane: document.querySelector('#js-child-membrane'),
    nucleus: document.querySelector('#js-child-nucleus'),
  },
  membraneConnector: document.querySelector('#js-membrane-connector'),
  ectoplasmConnector: document.querySelector('#js-ectoplasm-connector'),
  nucleusConnector: document.querySelector('#js-nucleus-connector'),
};
const VIEWBOX_SIZE = { W: 1200, H: 1200 };
const SIZES = {
  PARENT_MEMBRANE: 96,
  CHILD_MEMBRANE: 64,
  PARENT_ECTO: 48,
  CHILD_ECTO: 32,
  NUCLEUS: 12,
};

const animationFrame$ = Rx.Observable.interval(0, Rx.Scheduler.animationFrame);

/**
 * Create an observable stream to handle drag gesture
 */
const drag = ({ element, pan$, onStart, onEnd }) => {
  const panStart$ = pan$.filter(e => e.type === 'panstart');
  const panMove$ = pan$.filter(e => e.type === 'panmove');
  const panEnd$ = pan$.filter(e => e.type === 'panend');

  return panStart$.switchMap(() => {
    const { start, w, h } = getStartInfo(element);

    return panMove$.map(scaleToCanvas({ start, w, h })).takeUntil(panEnd$);
  });
};

/**
 * Generate the drag handler for a DOM element
 */
function handleDrag(element) {
  const hammerPan = new Hammer(element, {
    direction: Hammer.DIRECTION_ALL,
  });

  hammerPan.get('pan').set({ direction: Hammer.DIRECTION_ALL });
  const pan$ = Rx.Observable.fromEvent(hammerPan, 'panstart panmove panend');

  const drag$ = drag({
    element: element,
    pan$,
  });

  return animationFrame$.withLatestFrom(drag$, (_, p) => p);
}

/**
 * Amoeba drag location as an observable
 */
const amoebaDrag$ = handleDrag(amoeba.child.ectoplasm);

// Derive lerped location from amoebaDrag$
const dragWithLerp = (lerpiness = 0.05, start = [400, 600]) =>
  amoebaDrag$
    .scan(lerp(lerpiness))
    .map(p => [p.x, p.y])
    .startWith(start);

/**
 * Movement and mitosis logic
 */
const mitosis$ = new Rx.Subject();

// Move individual parts based on drag$
const membrane$ = dragWithLerp(0.03)
  .do(loc => {
    moveTo(loc, amoeba.parent.membrane);
    moveTo(loc, amoeba.parent.ectoplasm);
    moveTo(loc, amoeba.parent.nucleus);
  })
  .takeUntil(mitosis$)
  .share();
const nucleus$ = dragWithLerp(0.075)
  .do(loc => moveTo(loc, amoeba.child.nucleus))
  .share();
const core$ = dragWithLerp(0.07)
  .do(loc => {
    moveTo(loc, amoeba.child.membrane);
    moveTo(loc, amoeba.child.ectoplasm);
  })
  .share();

/**
 * Various metaball style connectors
 */
const membraneConnector$ = Rx.Observable
  .combineLatest(membrane$, core$, (membraneLoc, coreLoc) =>
    metaball(
      SIZES.PARENT_MEMBRANE,
      SIZES.CHILD_MEMBRANE,
      membraneLoc,
      coreLoc,
      () => {
        mitosis$.next(true);
      },
    ),
  )
  .share()
  .do(path => {
    amoeba.membraneConnector.setAttribute('d', path);
  })
  .takeUntil(mitosis$)
  .do(null, null, () => {
    amoeba.membraneConnector.setAttribute('d', '');
    amoeba.child.membrane.setAttribute('opacity', 1);
    amoeba.parent.core.setAttribute('opacity', 1);
  });

const ectoplasmConnector$ = Rx.Observable
  .combineLatest(membrane$, core$, (membraneLoc, coreLoc) =>
    metaball(SIZES.PARENT_ECTO, SIZES.CHILD_ECTO, membraneLoc, coreLoc),
  )
  .share()
  .do(path => {
    amoeba.ectoplasmConnector.setAttribute('d', path);
  })
  .takeUntil(mitosis$)
  .do(null, null, () => {
    amoeba.ectoplasmConnector.setAttribute('d', '');
  });

const nucleusConnector$ = Rx.Observable
  .combineLatest(membrane$, nucleus$, (membraneLoc, nucleusLoc) =>
    metaball(SIZES.NUCLEUS, SIZES.NUCLEUS, membraneLoc, nucleusLoc),
  )
  .share()
  .do(path => {
    amoeba.nucleusConnector.setAttribute('d', path);
  })
  .takeUntil(mitosis$)
  .do(null, null, () => {
    amoeba.nucleusConnector.setAttribute('d', '');
  });

Rx.Observable
  .merge(
    membrane$,
    nucleus$,
    core$,
    membraneConnector$,
    ectoplasmConnector$,
    nucleusConnector$,
  )
  .subscribe(() => {});

/**
 * Based on Metaball script by SATO Hiroyuki
 * http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
 */
function metaball(
  radius1,
  radius2,
  center1,
  center2,
  onMitosis = () => {},
  handleLenRate = 2.4,
  v = 0.5,
) {
  const HALF_PI = Math.PI / 2;
  const d = dist(center1, center2);
  const maxDist = radius1 + radius2 * 2.5;
  let u1, u2;

  if (radius1 === 0 || radius2 === 0) {
    return '';
  }

  if (d > maxDist) {
    onMitosis();
    return '';
  }

  if (d <= Math.abs(radius1 - radius2)) {
    return '';
  } else if (d < radius1 + radius2) {
    u1 = Math.acos(
      (radius1 * radius1 + d * d - radius2 * radius2) / (2 * radius1 * d),
    );
    u2 = Math.acos(
      (radius2 * radius2 + d * d - radius1 * radius1) / (2 * radius2 * d),
    );
  } else {
    u1 = 0;
    u2 = 0;
  }

  // All the angles
  const angle1 = angle(center2, center1);
  const angle2 = Math.acos((radius1 - radius2) / d);
  const angle1a = angle1 + u1 + (angle2 - u1) * v;
  const angle1b = angle1 - u1 - (angle2 - u1) * v;
  const angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
  const angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
  // Points
  const p1a = getVector(center1, angle1a, radius1);
  const p1b = getVector(center1, angle1b, radius1);
  const p2a = getVector(center2, angle2a, radius2);
  const p2b = getVector(center2, angle2b, radius2);

  // Define handle length by the
  // distance between both ends of the curve
  const totalRadius = radius1 + radius2;
  const d2Base = Math.min(v * handleLenRate, dist(p1a, p2a) / totalRadius);

  // Take into account when circles are overlapping
  const d2 = d2Base * Math.min(1, d * 2 / (radius1 + radius2));

  const r1 = radius1 * d2;
  const r2 = radius2 * d2;

  const h1 = getVector(p1a, angle1a - HALF_PI, r1);
  const h2 = getVector(p2a, angle2a + HALF_PI, r2);
  const h3 = getVector(p2b, angle2b - HALF_PI, r2);
  const h4 = getVector(p1b, angle1b + HALF_PI, r1);

  return metaballToPath(
    p1a,
    p2a,
    p1b,
    p2b,
    h1,
    h2,
    h3,
    h4,
    d > radius1,
    radius2,
  );
}

function metaballToPath(p1a, p2a, p1b, p2b, h1, h2, h3, h4, escaped, r) {
  // prettier-ignore
  return [
    'M', p1a,
    'C', h1, h2, p2a,
    'A', r, r, 0, escaped ? 1 : 0, 0, p2b,
    'C', h3, h4, p1b,
  ].join(' ');
}

/**
 * Utils
 */
function getStartInfo(element) {
  const start = {
    x: +element.getAttribute('cx'),
    y: +element.getAttribute('cy'),
  };
  const w = document.body.clientWidth;
  const h = document.body.clientHeight;
  return { start, w, h };
}

function scaleToCanvas({ start: { x, y }, w, h }) {
  const svgW = w > h ? VIEWBOX_SIZE.W : VIEWBOX_SIZE.W * w / h;
  const svgH = w > h ? VIEWBOX_SIZE.H * h / w : VIEWBOX_SIZE.H;

  return e => ({
    x: x + mapFromToRange(e.deltaX, 0, w, 0, svgW),
    y: y + mapFromToRange(e.deltaY, 0, h, 0, svgH),
  });
}

function mapFromToRange(x, x1, x2, y1, y2) {
  return (x - x1) * ((y2 - y1) / (x2 - x1)) + y1;
}

function moveTo([x, y], element) {
  element.setAttribute('cx', x);
  element.setAttribute('cy', y);
}

function dist([x1, y1], [x2, y2]) {
  return ((x1 - x2) ** 2 + (y1 - y2) ** 2) ** 0.5;
}

function angle([x1, y1], [x2, y2]) {
  return Math.atan2(y1 - y2, x1 - x2);
}

function getVector([cx, cy], a, r) {
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}

/**
 * Lerp
 * based on @davidkpiano's RXCSS
 */
function lerp(rate) {
  return ({ x, y }, targetValue) => {
    const mapValue = (value, tValue) => {
      const delta = (tValue - value) * rate;
      return value + delta;
    };

    return {
      x: mapValue(x, targetValue.x),
      y: mapValue(y, targetValue.y),
    };
  };
}