import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { NamedNode } from "n3";
import { getTopGraph } from "../web/RdfdbSyncedGraph";
import { showRoot } from "../web/show_specific";
import { SyncedGraph } from "../web/SyncedGraph";
export { Light9Fader } from "./Light9Fader";


@customElement("light9-effect-fader")
export class Light9EffectFader extends LitElement {
  static styles = [
    css`
      :host {
        display: inline-block;
        border: 2px gray outset;
        background: #272727;
      }
      light9-fader {
        margin: 4px;
        width: 100%;
      }
    `,
  ];
  render() {
    return html`
      <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
      <div>${this.value.toPrecision(3)}</div>
      <div>eff: <edit-choice nounlink .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
      <div>attr: <edit-choice nounlink .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
      <div>Slider ${this.column}</div>
    `;
  }

  graph?: SyncedGraph;
  ctx: NamedNode = new NamedNode(showRoot + "/fade");
  @property() uri!: NamedNode;
  @property() column!: string;
  @property() effect?: NamedNode;
  @property() effectAttr?: NamedNode;
  @state() setting?: NamedNode;

  @property() value: number = 0.0;

  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
      this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
    });
  }

  private compile(graph: SyncedGraph) {
    const U = graph.U();
    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
      // not loaded yet, perhaps
      this.column = "unset";
      this.effect = undefined;
      this.effectAttr = undefined;
      return;
    }
    this.column = graph.stringValue(this.uri, U(":column"));
    this.effect = graph.uriValue(this.uri, U(":effect"));
    this.setting = graph.uriValue(this.uri, U(":setting"));
    if (this.setting !== undefined) {
      try {
        this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
      } catch (e) {
        this.effectAttr = undefined;
      }
    }
  }

  private compileValue(graph: SyncedGraph) {
    const U = graph.U();
    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
      // not loaded yet
      // console.timeEnd(`valueSync ${this.uri.value}`)
      return;
    }
    const st = graph.uriValue(this.uri, U(":setting"));
    this.value = graph.floatValue(st, graph.Uri(":value"));
  }

  onSliderInput(ev: CustomEvent) {
    if (this.graph === undefined) {
      return;
    }
    const U = this.graph.U();
    const prev = this.value;
    const v: number = ev.detail.value;
    this.value = parseFloat(v.toPrecision(3)); // rewrite pls
    if (this.value == prev) {
      return;
    }
    if (!this.setting) {
      throw new Error("can't make new settings yet");
    }
    this.graph.patchObject(this.setting, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
  }

  onEffectChange(ev: CustomEvent) {
    if (this.graph === undefined) {
      return;
    }
    const { newValue } = ev.detail;
    this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
  }

  onEffectAttrChange(ev: CustomEvent) {
    if (this.graph === undefined) {
      return;
    }
    const { newValue } = ev.detail;
    if (this.setting === undefined) {
      this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
      this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
    }
    this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
  }
}