import debug from "debug";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators.js";
import * as N3 from "n3";
import { NamedNode, Quad } from "n3";
import { Patch } from "../patch";
import { getTopGraph } from "../RdfdbSyncedGraph";
import { showRoot } from "../show_specific";
import { SyncedGraph } from "../SyncedGraph";
export { EditChoice } from "../EditChoice";
export { Light9EffectFader } from "./Light9EffectFader";
export { Light9Fader } from "./Light9Fader";

debug.enable("*,autodep");
const log = debug("fade");

class FaderConfig {
  constructor(public uri: NamedNode, public column: number) { }
}

class FadePage {
  constructor(public uri: NamedNode) { }
  faderConfigs: FaderConfig[] = [];
}
class FadePages {
  pages: FadePage[] = [];
}

@customElement("light9-fade-ui")
export class Light9FadeUi extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
        user-select: none; /* really this is only desirable during slider drag events */
      }
      .mappedToHw {
        background: #393945;
      }
      #gm light9-fader {
        width: 300px;
      }
    `,
  ];
  render() {
    return html`
      <rdfdb-synced-graph></rdfdb-synced-graph>

      <h1>Fade</h1>
<div id="gm">
  <light9-fader .value=${this.grandMaster} @change=${this.gmChanged}></light9-fader>grand master
</div>
      ${(this.fadePages?.pages || []).map(this.renderPage.bind(this))}

      <div><button @click=${this.addPage}>Add new page</button></div>
    `;
  }
  private renderPage(page: FadePage): TemplateResult {
    const mappedToHw = this.currentHwPage !== undefined && page.uri.equals(this.currentHwPage);
    return html`<div class="${mappedToHw ? "mappedToHw" : ""}">
      <fieldset>
        <legend>
          Page
          <resource-display rename .uri=${page.uri}></resource-display>
          ${mappedToHw ? html`mapped to hardware sliders` : html`
          <button @click=${(ev: Event) => this.mapThisToHw(page.uri)}>Map this to hw</button>
          `}
        </legend>
        ${page.faderConfigs.map((fd) => html` <light9-effect-fader .uri=${fd.uri}></light9-effect-fader> `)}
      </fieldset>
    </div>`;
  }

  graph!: SyncedGraph;
  ctx: NamedNode = new NamedNode(showRoot + "/fade");

  @property() fadePages?: FadePages;
  @property() currentHwPage?: NamedNode;
  @property() grandMaster?: number;

  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      this.graph.runHandler(this.compile.bind(this), `faders layout`);
      this.graph.runHandler(this.compileGm.bind(this), `faders gm`);
    });
  }
  connectedCallback(): void {
    super.connectedCallback();
  }

  compile() {
    const U = this.graph.U();
    this.fadePages = undefined;
    const fadePages = new FadePages();
    for (let page of this.graph.subjects(U("rdf:type"), U(":FadePage"))) {
      const fp = new FadePage(page as NamedNode);
      try {
        for (let fader of this.graph.objects(page, U(":fader"))) {
          const colLit = this.graph.stringValue(fader, U(':column'))
          fp.faderConfigs.push(new FaderConfig(fader as NamedNode, parseFloat(colLit)));
        }
        fp.faderConfigs.sort((a, b) => {
          return a.column - (b.column);
        });
        fadePages.pages.push(fp);
      } catch (e) { }
    }
    fadePages.pages.sort((a, b) => {
      return a.uri.value.localeCompare(b.uri.value);
    });
    this.fadePages = fadePages;
    this.currentHwPage = undefined;
    try {
      const mc = this.graph.uriValue(U(":midiControl"), U(":map"));
      this.currentHwPage = this.graph.uriValue(mc, U(":outputs"));
    } catch (e) { }
  }
  compileGm() {
    const U = this.graph.U();
    this.grandMaster = undefined
    let newVal
    try {

      newVal = this.graph.floatValue(U(':grandMaster'), U(':value'))
    } catch (e) {
      return
    }
    this.grandMaster = newVal;

  }
  gmChanged(ev: CustomEvent) {
    const U = this.graph.U();
    const newVal = ev.detail.value
    // this.grandMaster = newVal;
    this.graph.patchObject(U(':grandMaster'), U(':value'), this.graph.LiteralRoundedFloat(newVal), this.ctx)

  }


  mapThisToHw(page: NamedNode) {
    const U = this.graph.U();
    log("map to hw", page);
    const mc = this.graph.uriValue(U(":midiControl"), U(":map"));
    this.graph.patchObject(mc, U(":outputs"), page, this.ctx);
  }

  addPage() {
    const U = this.graph.U();
    const uri = this.graph.nextNumberedResource(showRoot + "/fadePage");
    const adds = [
      //
      new Quad(uri, U("rdf:type"), U(":FadePage"), this.ctx),
      new Quad(uri, U("rdfs:label"), N3.DataFactory.literal("unnamed"), this.ctx),
    ];
    for (let n = 1; n <= 8; n++) {
      const f = this.graph.nextNumberedResource(showRoot + "/fader");
      const s = this.graph.nextNumberedResource(showRoot + "/faderset");
      adds.push(new Quad(uri, U(":fader"), f, this.ctx));
      adds.push(new Quad(f, U("rdf:type"), U(":Fader"), this.ctx));
      adds.push(new Quad(f, U(":column"), N3.DataFactory.literal("" + n), this.ctx));
      adds.push(new Quad(f, U(":setting"), s, this.ctx));
      adds.push(new Quad(s, U(":effectAttr"), U(":strength"), this.ctx));
      adds.push(new Quad(s, U(":value"), this.graph.LiteralRoundedFloat(0), this.ctx));
    }
    this.graph.applyAndSendPatch(new Patch([], adds));
  }
}