const RADIUS = 10;
const NODE_BASE_COLOR = [90, 90, 90];
const LINK_BASE_COLOR = [230, 230, 230];
const ACTIVE_COLOR = [255, 64, 129];

function trainMarkovChain(data, noteGroup, nextNoteGroup) {
  let left = { notes: noteGroup.notes, duration: noteGroup.duration };
  let right = {
    notes: nextNoteGroup.notes,
    duration: nextNoteGroup.duration
  };
  let mappings = data.get(left) || new buckets.Dictionary(JSON.stringify);
  let count = mappings.get(right) || 0;
  mappings.set(right, count + 1);
  data.set(left, mappings);
}

function predictUsingMarkovChain(current, data) {
  const options = data.get(current);
  if (options) {
    const nexts = options.keys();
    const r = Math.random();
    const totalWeight = nexts.reduce(
      (s, nextKey) => s + options.get(nextKey),
      0
    );
    let cumulativeWeight = 0;
    for (const nextKey of nexts) {
      cumulativeWeight += options.get(nextKey);
      if (cumulativeWeight > r * totalWeight) {
        return nextKey;
      }
    }
    throw 'Oh no';
  } else {
    const all = data.keys();
    return all[Math.floor(Math.random() * all.length)];
  }
}

let linkCount = 0;
function updateGraphData(graphData, markovChain) {
  markovChain.keys().forEach(node => {
    const connections = markovChain.get(node);
    const nodeKey = JSON.stringify(node);
    const from = graphData.nodes[nodeKey];
    connections.keys().forEach(toNode => {
      const weight = connections.get(toNode);
      const toNodeKey = JSON.stringify(toNode);
      const to = graphData.nodes[toNodeKey];
      const link = (graphData.links[nodeKey + toNodeKey] = graphData.links[
        nodeKey + toNodeKey
      ] || {
        id: linkCount++,
        source: from,
        target: to,
        recency: 0
      });
      link.value = weight;
    });
  });
}

function makeD3Graph(element, svg, defs, centerX, centerY) {
  const simulation = d3
    .forceSimulation()
    .velocityDecay(0.9)
    .force('link', d3.forceLink())
    .force('collide', d3.forceCollide(50).strength(0.8))
    .force('charge', d3.forceManyBody())
    .force('y', d3.forceY(centerY))
    .force('x', d3.forceX(centerX))
    .alphaTarget(1);
  const links = svg.append('g').attr('class', 'links');
  const arrows = defs.append('g');
  const nodes = svg.append('g').attr('class', 'nodes');
  return { simulation, links, arrows, nodes };
}

function renderD3Graph(
  { simulation, links, arrows, nodes },
  graphData,
  activeColor
) {
  const linkPaths = links.selectAll('path').data(d3.values(graphData.links));
  const linkPathsEnter = linkPaths
    .style('stroke', l => getColor(LINK_BASE_COLOR, activeColor, l.recency))
    .enter()
    .append('path')
    .attr('fill', 'none')
    .attr('marker-end', l => `url(#marker-${l.id}`)
    .style('stroke', l => getColor(LINK_BASE_COLOR, activeColor, l.recency));
  const linkPathsEnterUpdate = linkPathsEnter
    .merge(linkPaths)
    .style('stroke', l => getColor(LINK_BASE_COLOR, activeColor, l.recency))
    .style('stroke-width', l => l.value / 4);

  const arrowMarkers = arrows
    .selectAll('marker')
    .data(d3.values(graphData.links));
  const arrowMarkersEnter = arrowMarkers
    .enter()
    .append('svg:marker')
    .attr('id', l => `marker-${l.id}`)
    .attr('viewBox', '0 -5 10 10')
    .attr('refX', l => (l.source === l.target ? 0 : RADIUS * 1.8))
    .attr('refY', -2)
    .attr('markerWidth', 10)
    .attr('markerHeight', 10)
    .attr('markerUnits', 'userSpaceOnUse')
    .attr('orient', 'auto');
  arrowMarkersEnter.append('svg:path').attr('d', `M0,-3L10,0L0,3`);
  arrowMarkersEnter
    .merge(arrowMarkers)
    .select('path')
    .style('fill', l => getColor(LINK_BASE_COLOR, activeColor, l.recency));

  const nodeCircles = nodes
    .selectAll('circle')
    .data(d3.values(graphData.nodes));
  const nodeCirclesEnter = nodeCircles
    .enter()
    .append('circle')
    .attr('r', RADIUS)
    .style('stroke', '#aaa')
    .call(
      d3
        .drag()
        .on('start', dragstarted)
        .on('drag', dragged)
        .on('end', dragended)
    );
  const nodeCirclesEnterUpdate = nodeCirclesEnter
    .merge(nodeCircles)
    .style('fill', n => getColor(NODE_BASE_COLOR, activeColor, n.recency))
    .style('stroke-width', n => (n.current ? 2 : 0));

  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  simulation.nodes(d3.values(graphData.nodes)).on('tick', () => {
    linkPathsEnterUpdate.attr('d', d => {
      var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);

      if (dr === 0) {
        // Self-link
        const xRotation = 0;
        const largeArc = 1;
        const sweep = 0;
        const drx = 20;
        const dry = 20;
        const x1 = d.target.x;
        const y1 = d.target.y;
        const x2 = x1 + RADIUS;
        const y2 = y1 + RADIUS;
        return `M${x1},${y1}A${drx},${dry}, ${xRotation},${largeArc},${sweep} ${x2},${y2}`;
      } else {
        return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d
          .target.y}`;
      }
    });
    nodeCirclesEnterUpdate.attr('cx', d => d.x).attr('cy', d => d.y);
  });
  simulation
    .force('link')
    .distance(d => 175 - d.value * 5)
    .links(d3.values(graphData.links));
  simulation.force('x').strength(d => d.recency / 2);
  simulation.force('y').strength(d => d.recency / 2);
  simulation.alpha(1).restart();
}

function mixColors(a, b, percentage) {
  let mix = [];
  mix[0] = Math.floor((1 - percentage) * a[0] + percentage * b[0]);
  mix[1] = Math.floor((1 - percentage) * a[1] + percentage * b[1]);
  mix[2] = Math.floor((1 - percentage) * a[2] + percentage * b[2]);
  return mix;
}

function getColor(baseColor, activeColor, recency) {
  const color = mixColors(baseColor, activeColor, recency);
  return `rgb(${color.join(',')}`;
}

function setCurrentAndRender(graphData, d3Graph, current, activeColor) {
  const currentKey = JSON.stringify(current);
  d3.values(graphData.links).forEach(link => {
    const current = link.target.key === currentKey && link.source.current;
    link.recency = current ? 1 : link.recency * 0.7;
  });
  d3.values(graphData.nodes).forEach(node => {
    node.current = node.key === currentKey;
    node.recency = node.key === currentKey ? 1 : node.recency * 0.7;
  });
  renderD3Graph(d3Graph, graphData, activeColor);
}

function begin() {
  const markovChain = new buckets.Dictionary(JSON.stringify);
  const graphData = { nodes: {}, links: {} };
  const el = d3.select('.visualization');
  const width = el.node().getBoundingClientRect().width;
  const height = el.node().getBoundingClientRect().height;
  const svg = el.append('svg').attr('width', width).attr('height', height);
  const defs = svg.append('svg:defs');

  const centerX = width / 2;
  const centerY = height / 2;
  const d3Graph = makeD3Graph(
    '.graph',
    svg,
    defs,
    centerX,
    centerY
  );


  WebMidi.enable(err => {
    if (err) {
      console.log("WebMidi could not be enabled.", err);
    } else {
      WebMidi.inputs.forEach(input => {
        input.addListener('noteon', 'all', e => toggleOnScreen(e.note.number, true));
        input.addListener('noteoff', 'all', e => toggleOnScreen(e.note.number, false));
      });
    }
  });

  const keyboard = new AudioKeys({polyphony: 1, rows: 2, priority: 'last'});
  keyboard.down(({note, velocity}) => toggleOnScreen(note, true));
  keyboard.up(({note}) => toggleOnScreen(note, false));

  onScreenKeyb.on('*', ({on, note}) => on ? noteOn(note, 0.7, false) : noteOff(note, false));
    
  function toggleOnScreen(note, on) {
    for (const key of onScreenKeyb.keys) {
      if (key.note === Math.round(note)) {
        onScreenKeyb.toggle(key, on);
      }
    }
  }


  let last = null;
  function noteOn(note, velocity, updateOnScreen = true) {
    piano.keyDown(note, velocity);
    if (updateOnScreen) toggleOnScreen(note, true);

    let current = {notes: [note], duration: 1};
    graphData.nodes[JSON.stringify(current)] = graphData.nodes[
        JSON.stringify(current)
      ] || {
        key: JSON.stringify(current),
        recency: 0,
        x: centerX,
        y: centerY
      };
    if (last) {
      trainMarkovChain(markovChain, last, current);
    }
    updateGraphData(graphData, markovChain);
    setCurrentAndRender(graphData, d3Graph, current, ACTIVE_COLOR);
    last = current;

    Tone.Transport.cancel();
    Tone.Transport.schedule(function autoPlay() {
      current = predictUsingMarkovChain(last, markovChain);
      if (current) {
        piano.keyUp(current.notes[0]);
        piano.keyDown(current.notes[0], 0.3);
        updateGraphData(graphData, markovChain);
        setCurrentAndRender(graphData, d3Graph, current, ACTIVE_COLOR);
        last = current;
      }
      Tone.Transport.schedule(autoPlay, `+${Math.random() * 7}`)
    }, '+3');
  }
  function noteOff(note, updateOnScreen = true) {
    piano.keyUp(note);
    if (updateOnScreen) toggleOnScreen(note, false);
  }

  renderD3Graph(d3Graph, graphData, ACTIVE_COLOR);
}

const compressor = new Tone.Compressor().toMaster();
// Piano assets crash mobile devices, try to pare down if detecting touch device.
const isTouch = 'ontouchstart' in window;
const pianoVelocities = 1;
const pianoRelease = !isTouch;
const piano = new Piano.default(
  [21, 90],
  pianoVelocities,
  pianoRelease
).connect(compressor);

nx.onload = () => {
  onScreenKeyb.octaves = 6;
  onScreenKeyb.midibase = 24;
  onScreenKeyb.init();
};

piano.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/969699/').then(() => {
    document.querySelector('.loading').remove();
    begin();
});
Tone.Transport.start();

StartAudioContext(Tone.context, document.documentElement);