import debug from "debug";
import { css, html, LitElement } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import { CollectorClient } from "../collector/CollectorClient";
import { getTopGraph } from "../RdfdbSyncedGraph";
import { SyncedGraph } from "../SyncedGraph";
import { FindSafeExposure } from "./FindSafeExposure";
import { Light9Camera } from "./Light9Camera";
import { XyPlot } from "./XyPlot";
import { NamedNode } from "n3";
import { showRoot } from "../show_specific";
export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
export { Light9Camera } from "./Light9Camera";
export { XyPlot } from "./XyPlot";

debug.enable("*");
const log = debug("calibrate");

export async function sleep(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

@customElement("light9-calibrate")
export class Light9Calibrate extends LitElement {
  graph!: SyncedGraph;
  static styles = [
    css`
      button {
        min-height: 3em;
        min-width: 10em;
      }
    `,
  ];
  collector: CollectorClient = new CollectorClient("calibrate");
  @query("light9-camera", true) cam?: Light9Camera;
  @query("xy-plot", true) plot?: XyPlot;
  @state() device?: NamedNode;
  @state() calibrationSession?: NamedNode;
  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      const U = this.graph.U();
      this.calibrationSession = U(showRoot + "/calibration/session1");
      this.device = U("dev:parR3");
      this.graph.patchObject(this.calibrationSession, U("rdf:type"), U(":CalibrationSession"), this.calibrationSession);
    });
  }

  render() {
    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
      <h1>Calibrate</h1>
      <light9-camera></light9-camera>

      <p>Calibration session; [ ${this.calibrationSession?.value} ]</p>
      <p>Device to calibrate: [ ${this.device?.value} ]</p>

      <ol>
        <li><button @click=${this.setToFull}>Set to full</button></li>
        <li><button @click=${this.findSafeExposure}>Find safe exposure</button></li>
        <li><button @click=${this.setToZero}>Set to 0</button></li>
        <li><button @click=${this.markTare}>Mark tare</button></li>
        <li><button @click=${this.calibrateLoop}>Calibrate loop</button></li>
      </ol>
      <xy-plot label="zebra pixels vs exposure"></xy-plot>
      r/g/b/r*g*b lines ,x=send y=seen `;
  }

  async withButtonSpinner(ev: MouseEvent, fn: () => Promise<void>) {
    const btn = ev.target as HTMLButtonElement;
    try {
      btn.disabled = true;
      await fn();
    } finally {
      btn.disabled = false;
    }
  }

  async setToFull(ev: MouseEvent) {
    const U = this.graph.U();
    await this.withButtonSpinner(ev, async () => {
      this.collector.updateSettings([
        /// device,attr,value
        [this.device!, U(":color"), this.graph.Literal("#ffffff")],
        [this.device!, U(":white"), this.graph.LiteralRoundedFloat(1)],
      ]);
    });
  }

  async findSafeExposure(ev: MouseEvent) {
    await this.withButtonSpinner(ev, async () => {
      const algo = new FindSafeExposure(this.cam!, this.plot!);
      const expo = await algo.run();
    });
  }

  async setToZero(ev: MouseEvent) {
    const U = this.graph.U();
    await this.withButtonSpinner(ev, async () => {
      this.collector.updateSettings([
        [this.device!, U(":color"), this.graph.Literal("#000000")],
        [this.device!, U(":white"), this.graph.LiteralRoundedFloat(0)],
      ]);
    });
  }

  async markTare(ev: MouseEvent) {
    await this.withButtonSpinner(ev, async () => {});
  }

  async calibrateLoop(ev: MouseEvent) {
    await this.withButtonSpinner(ev, async () => {});
  }
}