import debug from "debug";
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { NamedNode } from "n3";
import { sortBy } from "underscore";
import { getTopGraph } from "../RdfdbSyncedGraph";
import { SyncedGraph } from "../SyncedGraph";
export { ResourceDisplay } from "../ResourceDisplay";

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

@customElement("light9-effect-listing")
export class Light9EffectListing extends LitElement {
  render() {
    return html`
      <h1>Effects</h1>
      <rdfdb-synced-graph></rdfdb-synced-graph>

      ${this.effects.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)}
    `;
  }
  graph!: SyncedGraph;
  effects: NamedNode[] = [];

  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      this.graph.runHandler(this.getClasses.bind(this), "getClasses");
    });
  }

  getClasses() {
    const U = this.graph.U();
    this.effects = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[];
    this.effects = sortBy(this.effects, (ec: NamedNode) => {
      try {
        return this.graph.stringValue(ec, U("rdfs:label"));
      } catch (e) {
        return ec.value;
      }
    });
    this.requestUpdate();
  }
}

@customElement("light9-effect-class")
export class Light9EffectClass extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
        padding: 5px;
        border: 1px solid green;
        background: #1e271e;
        margin-bottom: 3px;
      }
      a {
        color: #7992d0;
        background: #00000859;
        min-width: 4em;
        min-height: 2em;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
      }
      resource-display {
        min-width: 12em;
        font-size: 180%;
      }
    `,
  ];
  render() {
    if (!this.uri) {
      return html`loading...`;
    }
    return html`
      Effect
      <resource-display .uri=${this.uri} rename></resource-display>
      <a href="../live?effect=${this.uri.value}">Edit</a>
      <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax>
      <span style="float:right">
        <button disabled @click=${this.onAdd}>Add to current song</button>
        <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button>
      </span>
    `;
  }
  graph!: SyncedGraph;
  uri?: NamedNode;

  onAdd() {
    // this.$.songEffects.body = { drop: this.uri.value };
    // this.$.songEffects.generateRequest();
  }

  onMomentaryPress() {
    // this.$.songEffects.body = { drop: this.uri.value, event: "start" };
    // this.lastPress = this.$.songEffects.generateRequest();
    // return this.lastPress.completes.then((request: { response: { note: any } }) => {
    //   return (this.lastMomentaryNote = request.response.note);
    // });
  }

  onMomentaryRelease() {
    // if (!this.lastMomentaryNote) {
    //   return;
    // }
    // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote };
    // this.lastMomentaryNote = null;
    // return this.$.songEffects.generateRequest();
  }
}