export function test(ordinalDivID, brewerDivID, customDivID, customArr, steps) {
    d3Select(ordinalDivID)
        .selectAll(".palette")
        .data(palette_ordinal(), function (d: any) { return d; })
        .enter().append("span")
        .attr("class", "palette")
        .attr("title", function (d) { return d; })
        .on("click", function (d) {
            console.log(d3Values(d.value).map(JSON.stringify as any).join("\n"));
        })
        .selectAll(".swatch").data(function (d) { return palette_ordinal(d).colors(); })
        .enter().append("span")
        .attr("class", "swatch")
        .style("background-color", function (d: any) { return d; });

    d3Select(brewerDivID)
        .selectAll(".palette")
        .data(palette_rainbow(), function (d: any) { return d; })
        .enter().append("span")
        .attr("class", "palette")
        .attr("title", function (d) { return d; })
        .on("click", function (d) {
            console.log(d3Values(d.value).map(JSON.stringify as any).join("\n"));
        })
        .selectAll(".swatch2").data(function (d) { return palette_rainbow(d).colors(); })
        .enter().append("span")
        .attr("class", "swatch2")
        .style("height", (256 / 32) + "px")
        .style("background-color", function (d: any) { return d; });

    const palette = { id: customArr.join("_") + steps, scale: palette_rainbow("custom", customArr, steps) };
    d3Select(customDivID)
        .selectAll(".palette")
        .data([palette], function (d: any) { return d.id; })
        .enter().append("span")
        .attr("class", "palette")
        .attr("title", function () { return "aaa"; /*d.from + "->" + d.to;*/ })
        .on("click", function (d) {
            console.log(d3Values(d.id).map(JSON.stringify as any).join("\n"));
        })
        .selectAll(".swatch2").data(function () {
            const retVal = [];
            for (let i = 0; i <= 255; ++i) {
                retVal.push(palette.scale(i, 0, 255));
            }
            return retVal;
        })
        .enter().append("span")
        .attr("class", "swatch2")
        .style("background-color", function (d) { return d; });
}

window['buildSpecOpts'] = (id: string, baseName: string) => {
  const oldName = select('#' + id).attr('data-name');
  const prefixSel = select('select[name=' + id + ']');
  const inputsSel = selectAll('input[name=' + id + ']:checked');
  const prefix = prefixSel.empty() ? id : prefixSel.property('value');
  const values = inputsSel
    .nodes()
    .map((n: any) => n.value)
    .sort()
    .join('_');
  const newName = baseName + prefix + (values ? '_' + values : '');
  if (oldName !== newName) {
    window['changeSpec'](id, newName);
  }
};

export function embedExample($target: any, spec: TopLevelSpec, actions = true, tooltip = true) {
  const vgSpec = compile(spec).spec;

  const view = new vega.View(vega.parse(vgSpec), {loader: loader}).renderer('svg').initialize($target);

  if (tooltip) {
    const handler = new Handler().call;
    view.tooltip(handler);
  }

  view.run();

  if (actions) {
    select($target)
      .append('div')
      .attr('class', 'vega-actions')
      .append('a')
      .text('Open in Vega Editor')
      .attr('href', '#')
      // tslint:disable-next-line
      .on('click', function() {
        post(window, editorURL, {
          mode: 'vega-lite',
          spec: compactStringify(spec),
          config: vgSpec.config,
          renderer: 'svg'
        });
        event.preventDefault();
      });
  }

  return view;
}

function updateProgressBar(doc : ICoqDocument) : void {
  const allEdits = doc.getAllSentences()

  const selection =
    d3Selection
      .select(`#${progressBarId}`)
      .selectAll<HTMLElement, ISentence<IStage>>('div')
      .data(allEdits, e => `${e.sentenceId}`)
  // for now we can append, eventually we might need sorting
  selection.enter().append('div')
    .classed(barItemClass, true)
    .style('height', '100%')
    .style('display', 'inline-block')

  const eltWidth = ($(`#${progressBarId}`).width() || 0) / allEdits.length
  selection
    .style('width', `${eltWidth}px`)
    .style('background-color', (d : ISentence<any>) => d.getColor())
    .attr('title', d => {
      const commandId = d.commandTag.caseOf({
        nothing : () => 'unassigned yet',
        just : cid => `${cid}`,
      })
      const stateId = d.getStateId().caseOf({
        nothing : () => 'unassigned yet',
        just : sid => `${sid}`,
      })
      return `Sentence ID: ${d.sentenceId}, Command ID: ${commandId}, State ID: ${stateId}`
    })

  selection.exit().remove()
}

  static createNode(name:string, fn: (name: string, parent: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => void = (parent) => null): HTMLElement {
    let node = document.createElement('div');
    let d3node = d3_select(node);

    let content = d3node.append('div')
      .classed('trial-content', true)

    let selectorDiv = content.append("div")
      .classed("graphselector", true)
      .classed("hide-toolbar", true);

    BaseActivationGraphWidget.graphTypeForm(name, selectorDiv);

    fn(name, selectorDiv);

    BaseActivationGraphWidget.useCacheForm(name, selectorDiv);

    let selectorReload = selectorDiv.append("a")
      .attr("href", "#")
      .classed("link-button reload-button", true)

    selectorReload.append('i')
      .classed("fa fa-refresh", true);

    selectorReload.append('span')
      .text('Reload');

    content.append('div')
      .classed('sub-content', true);

    return node;
  }

function drawChart(user: PuzzleUserData) {
  const history = Array.from(user.recent.map(x => x[2]))
  const rating = user.rating
  if (rating !== undefined) {
    history.push(rating)
  }
  const data = history.map((x, i) => [i + 1, x])
  const graph = select('#training-graph')
  const margin = {top: 5, right: 20, bottom: 5, left: 35}
  const width = +graph.attr('width') - margin.left - margin.right
  const height = +graph.attr('height') - margin.top - margin.bottom
  const g = graph.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const xvalues = data.map(d => d[0])
  const scaleX = scaleLinear()
  .domain([Math.min.apply(null, xvalues), Math.max.apply(null, xvalues)])
  .rangeRound([0, width])

  const yvalues = data.map(d => d[1])
  const scaleY = scaleLinear()
  .domain([Math.min.apply(null, yvalues) - 10, Math.max.apply(null, yvalues) + 10])
  .rangeRound([height, 0])

  const area = d3Area()
  .x(d => scaleX(d[0]))
  .y0(height)
  .y1(d => scaleY(d[1]))

  const line = d3Area()
  .x(d => scaleX(d[0]))
  .y(d => scaleY(d[1]))

  const yAxis = axisLeft(scaleY)
  .tickFormat(d => String(d))

  g.datum(data)

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text(i18n('rating'))

  g.append('path')
  .attr('class', 'path')
  .attr('fill', 'steelblue')
  .attr('stroke', 'steelblue')
  .attr('stroke-linejoin', 'round')
  .attr('stroke-linecap', 'round')
  .attr('stroke-width', 0)
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .attr('d', line)
}

 .on('end', (d, i, nodes) => {
   // this is in 'end' so that it does not trigger before nodes are positioned
   d3Selection.select<d3Selection.BaseType, IProofTreeNode>(nodes[i])
     .on('click', dd => {
       // asyncLog('CLICK ' + nodeString(dd))
       dd.click()
     })
 })

 drawCircle(csiValue, previousCsiValue) {
   this.csiValue = csiValue;
   const calculatedPreviousCsi = this.calculateCsiArcTarget(CalculationUtil.round(previousCsiValue));
   const selection = select(this.svgElement.nativeElement).selectAll("g.csi-circle").data([this.csiValue]);
   this.enter(selection.enter());
   this.update(selection.merge(selection.enter()), calculatedPreviousCsi);
   this.exit(selection.exit());
 }

 function getNodeEl() {
     if (node == null) {
         node = initNode();
         // re-add node to DOM
         rootElement().appendChild(node);
     }
     return select(node);
 }

 enter(domNode, element) {
     super.enter(domNode, element);
     d3Select(domNode.parentNode)
         .style("height", "100%")
         .style("width", "100%")
         ;
 }