import debug from "debug";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { NamedNode } from "n3";
import { getTopGraph } from "../web/RdfdbSyncedGraph";
import { shortShow } from "../web/show_specific";
import { SyncedGraph } from "../web/SyncedGraph";
export { EditChoice } from "../web/EditChoice";
export { Light9EffectFader } from "./Light9EffectFader";

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

@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 */
      }
    `,
  ];
  render() {
    return html`
      <rdfdb-synced-graph></rdfdb-synced-graph>

      <h1>Fade</h1>


      ${this.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
    `;
  }

  graph!: SyncedGraph;

  @property() faders: NamedNode[] = [];

  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      // todo: start with a page, then find the faders on that page
      this.faders = [
        g.Uri(`:show/${shortShow}/fadePage1f0`),
        g.Uri(`:show/${shortShow}/fadePage1f1`),
        g.Uri(`:show/${shortShow}/fadePage1f2`),
        g.Uri(`:show/${shortShow}/fadePage1f3`),
        g.Uri(`:show/${shortShow}/fadePage1f4`),
        g.Uri(`:show/${shortShow}/fadePage1f5`),
        g.Uri(`:show/${shortShow}/fadePage1f6`),
        g.Uri(`:show/${shortShow}/fadePage1f7`),
      ];
    });
  }
  connectedCallback(): void {
    super.connectedCallback();
  }
}