import debug from "debug";
import * as echarts from "echarts";
import { css, html, LitElement, PropertyValueMap } from "lit";
import { customElement, property } from "lit/decorators.js";
debug.enable("*");
const log = debug("calibrate");

@customElement("xy-plot")
export class XyPlot extends LitElement {
  static styles = [
    css`
      #chart {
        width: 800px;
        height: 300px;
      }
    `,
  ];
  chart!: echarts.ECharts;
  @property() label: string = "";
  @property() data: number[][] = [];

  render() {
    return html`
      <fieldset>
        <legend>${this.label}</legend>
        <div id="chart"></div>
      </fieldset>
    `;
  }

  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
    var chartDom = this.shadowRoot!.getElementById("chart")!;
    this.chart = echarts.init(chartDom);
    this.chart.setOption({
      animation: false,
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "d",
          data: [],
          type: "line",
        },
      ],
    });
  }

  clear() {
    this.data.length = 0;
  }

  insertPoint(x: number, y: number) {
    this.data.push([x, y]);
    this.data.sort((a, b) => a[0] - b[0]);
    this.chart.setOption({ series: [{ name: "d", data: this.data }] });
  }
  setXMarklines(lines: { txt: string; x: number }[]) {
    const markLineData = (row: { txt: string; x: number }, i: number) => ({ name: row.txt, label: { distance: 10*i, formatter: "{b} {c}", color: "#fff", textBorderWidth: 0 }, xAxis: row.x });
    this.chart.setOption(
      {
        series: [
          {
            name: "d",
            markLine: {
              data: lines.map(markLineData),
            },
          },
        ],
      } //
    );
  }
}