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";

import { meter } from "./Light9FadeUi";

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;

    }

    meter.tick();

    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);

  }

}

import { customElement, property } from "lit/decorators.js";

import { shortShow } from "../web/show_specific";

export { Light9EffectFader } from "./Light9EffectFader";

export let meter: FPSMeter;