import debug from "debug";

import { Literal, NamedNode, Quad_Object, Quad_Predicate, Quad_Subject, Term } from "n3";

import { some } from "underscore";

import { Patch, patchContainsPreds, patchUpdate } from "../web/patch";

import { SyncedGraph } from "../web/SyncedGraph";

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

type Color = string;

export type ControlValue = number | Color | NamedNode;

const log = debug("effect");

function isUri(x: Term | number | string): x is NamedNode {

  return typeof x == "object" && x.termType == "NamedNode";

}

function valuePred(graph: SyncedGraph, attr: NamedNode): NamedNode {

  const U = graph.U();

  const scaledAttributeTypes = [U(":color"), U(":brightness"), U(":uv")];

  if (some(scaledAttributeTypes, (x: NamedNode) => attr.equals(x))) {

    return U(":scaledValue");

  } else {

    return U(":value");

  }

}

// effect settings data; r/w sync with the graph

export class Effect {

  private settings: Array<{ device: NamedNode; deviceAttr: NamedNode; setting: NamedNode; value: ControlValue }> = [];

  private ctxForEffect: NamedNode

  constructor(

    public graph: SyncedGraph,

    public uri: NamedNode,

    // called if the graph changes our values and not when the caller uses edit()

    private onValuesChanged: (values: void) => void

  ) {

    this.ctxForEffect = this.graph.Uri(this.uri.value.replace("light9.bigasterisk.com/effect", `light9.bigasterisk.com/show/${shortShow}/effect`));

    graph.runHandler(this.rebuildSettingsFromGraph.bind(this), `effect sync ${uri.value}`);

  }

  addNewEffectToGraph() {

    const U = this.graph.U();

    const quad = (s: Quad_Subject, p: Quad_Predicate, o: Quad_Object) => this.graph.Quad(s, p, o, this.ctxForEffect);

    const addQuads = [

      quad(this.uri, U("rdf:type"), U(":Effect")),

      quad(this.uri, U("rdfs:label"), this.graph.Literal(this.uri.value.replace(/.*\//, ""))),

      quad(this.uri, U(":publishAttr"), U(":strength")),

    ];

    const patch = { adds: addQuads, dels: [] } as Patch;

    log("init new effect", patch);

    this.settings = [];

    this.graph.applyAndSendPatch(patch);

  }

        margin: 4px;

        padding: 1px;

        background: #171717; /* deviceClass gradient added later */

        break-inside: avoid-column;

        width: 335px;

      }

      .deviceAttr {

        border-top: 1px solid #272727;

        padding-bottom: 2px;

        display: flex;

      }

      .deviceAttr > span {

      }

      .deviceAttr > light9-live-control {

        flex-grow: 1;

      }

      h2 {

        font-size: 110%;

        padding: 4px;

        margin-top: 0;

        margin-bottom: 0;

      }

      .device,

      h2 {

        border-top-right-radius: 15px;

      }

      #mainLabel {

        font-size: 120%;

        color: #9ab8fd;

        text-decoration: initial;

      }

      .device.selected h2 {

        outline: 3px solid #ffff0047;

      }

      .deviceAttr.selected {

        background: #cada1829;

      }

    `,

  ];

  render() {

    return html`

      <div class="device ${this.devClasses}">

        <h2 style="${this._bgStyle(this.deviceClass)}" xon-click="onClick">

          <resource-display id="mainLabel" .uri="${this.uri}"></resource-display>

          a <resource-display minor .uri="${this.deviceClass}"></resource-display>

        </h2>

        ${this.deviceAttrs.map(

          (dattr: DeviceAttrRow) => html`

              <span>attr <resource-display minor .uri="${dattr.uri}"></resource-display></span>

              <light9-live-control

                .device="${this.uri}"

                .deviceAttrRow="${dattr}"

                .effect="${this.effect}"

                .graphToControls="${this.graphToControls}"

              ></light9-live-control>

            </div>

          `

        )}

      </div>

    `;

  }

  @property() uri!: NamedNode;

  @property() effect!: NamedNode;

  @property() graphToControls!: GraphToControls;

  @property() devClasses: string = ""; // the css kind

  @property() deviceAttrs: DeviceAttrRow[] = [];

  @property() deviceClass: NamedNode | null = null;

  @property() selectedAttrs: Set<NamedNode> = new Set();

  constructor() {

    super();

    getTopGraph().then((g) => {

      this.graph = g;

      this.graph.runHandler(this.syncDeviceAttrsFromGraph.bind(this), `${this.uri.value} update`);

    });

    this.selectedAttrs = new Set();

  }

  _bgStyle(deviceClass: NamedNode | null): string {

    if (!deviceClass) return "";

    let hash = 0;

    const u = deviceClass.value;

    for (let i = u.length - 10; i < u.length; i++) {

      hash += u.charCodeAt(i);

    }

    const hue = (hash * 8) % 360;

    const accent = `hsl(${hue}, 49%, 22%)`;

    return `background: linear-gradient(to right, rgba(31,31,31,0) 50%, ${accent} 100%);`;

  }

  setDeviceSelected(isSel: any) {

    this.devClasses = isSel ? "selected" : "";

  }

import debug from "debug";

import { css, html, LitElement, PropertyValues } from "lit";

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

@customElement("light9-listbox")

export class Light9Listbox extends LitElement {

  static styles = [

    css`

      paper-listbox {

        --paper-listbox-background-color: none;

        --paper-listbox-color: white;

        --paper-listbox: {

          /* measure biggest item? use flex for columns? */

          column-width: 9em;

        }

      }

      paper-item {

        --paper-item-min-height: 0;

        --paper-item: {

          display: block;

          border: 1px outset #0f440f;

          margin: 0 1px 5px 0;

          background: #0b1d0b;

        }

      }

      paper-item.iron-selected {

        background: #7b7b4a;

      }

    `,

  ];

  render() {

    return html`

      <paper-listbox id="list" selected="{{value}}" attr-for-selected="uri" on-focus-changed="selectOnFocus">

        <paper-item on-focus="selectOnFocus">None</paper-item>

        <template is="dom-repeat" items="{{choices}}">

          <paper-item on-focus="selectOnFocus" uri="{{item.uri}}">{{item.label}}</paper-item>

        </template>

      </paper-listbox>

    `;

  }

  @property() choices: Array<Choice> = [];

  @property() value: String | null = null;

  constructor() {

    super();

  }

  selectOnFocus(ev) {

    if (ev.target.uri === undefined) {

      // *don't* clear for this, or we can't cycle through all choices (including none) with up/down keys

      //this.clear();

      //return;

import debug from "debug";

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

import { SyncedGraph } from "../web/SyncedGraph";

import { ControlValue } from "./Effect";

import { GraphToControls } from "./GraphToControls";

import { DeviceAttrRow } from "./Light9DeviceControl";

import { Choice } from "./Light9Listbox";

export { Slider } from "@material/mwc-slider";

@customElement("light9-live-control")

export class Light9LiveControl extends LitElement {

  graph!: SyncedGraph;

  static styles = [

    css`

      #colorControls {

        display: flex;

        align-items: center;

      }

      #colorControls > * {

        margin: 0 3px;

      }

      #colorControls paper-slider {

      }

      paper-slider {

        width: 100%;

        height: 25px;

      }

      paper-slider {

        --paper-slider-knob-color: var(--paper-red-500);

        --paper-slider-active-color: var(--paper-red-500);

        --paper-slider-font-color: white;

        --paper-slider-input: {

          width: 75px;

          background: black;

          display: inline-block;

        }

      }

    `,

  ];

  render() {

    if (this.dataType.value === "http://light9.bigasterisk.com/scalar") {

      return html`<mwc-slider .value=${this.sliderValue} step=${1 / 255} min="0" max="1" @input=${this.onSliderInput}></mwc-slider> `;

    } else if (this.dataType.value === "http://light9.bigasterisk.com/color") {

      return html`

        <div id="colorControls">

          <button on-click="goBlack">0.0</button>

          <light9-color-picker color="{{value}}"></light9-color-picker>

        </div>

      `;

    } else if (this.dataType.value === "http://light9.bigasterisk.com/choice") {

      return html` <light9-listbox choices="{{deviceAttrRow.choices}}" value="{{choiceValue}}"> </light9-listbox> `;

    } else {

      </div>

      <div id="deviceControls">

        ${this.devices.map(

          (device: NamedNode) => html`

            <light9-device-control .uri=${device} .effect=${this.effectChoice} .graphToControls=${this.graphToControls}></light9-device-control>

          `

        )}

      </div>

    `;

  }

  devices: Array<NamedNode> = [];

  // uri of the effect being edited, or null. This is the

  // master value; GraphToControls follows.

  @property() effectChoice: NamedNode | null = null;

  graphToControls!: GraphToControls;

  okToWriteUrl: boolean = false;

  constructor() {

    super();

    getTopGraph().then((g) => {

      this.graph = g;

      this.graph.runHandler(this.findDevices.bind(this), "findDevices");

      this.graphToControls = new GraphToControls(this.graph);

      // this.graph.runHandler(this.xupdate.bind(this), "Light9LiveControls update");

      this.setEffectFromUrl();

    });

  }

  updated(changedProperties: PropertyValues) {

    if (changedProperties.has("effectChoice")) {

      log(`effectChoice to ${this.effectChoice?.value}`);

      this.onEffectChoice();

    }

  }

  findDevices(patch?: Patch) {

    const U = this.graph.U();

    if (patch && !patchContainsPreds(patch, [U("rdf:type")])) {

      return;

    }

    this.devices = [];

    let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));

    log(`found ${classes.length} device classes`);

    uniq(sortBy(classes, "value"), true).forEach((dc) => {

      sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {

        this.devices.push(dev as NamedNode);

      });

    });

    this.requestUpdate();

  }

  setEffectFromUrl() {

    // not a continuous bidi link between url and effect; it only reads

    // the url when the page loads.

    const effect = new URL(window.location.href).searchParams.get("effect");

    if (effect != null) {

      log(`found effect in url ${effect}`);

      this.effectChoice = this.graph.Uri(effect);

    }

    this.okToWriteUrl = true;

  }

  writeToUrl(effect: NamedNode | null) {

    const effectStr = effect ? this.graph.shorten(effect) : "";

    if (!this.okToWriteUrl) {

      return;

    }

    const u = new URL(window.location.href);

    if ((u.searchParams.get("effect") || "") === effectStr) {

      return;

    }

    u.searchParams.set("effect", effectStr); // this escapes : and / and i wish it didn't

    window.history.replaceState({}, "", u.href);

    log("wrote new url", u.href);

  }

  newEffect() {

    this.effectChoice = this.graphToControls.newEffect();

  }

  onEffectChoice() {

    const U = (x: any) => this.graph.Uri(x);

    if (this.effectChoice == null) {

      // unlink

      log("onEffectChoice unlink");

      if (this.graphToControls != null) {

        this.graphToControls.setEffect(null);

      }

    } else {

      if (this.graphToControls != null) {

        this.graphToControls.setEffect(this.effectChoice);

      } else {

        throw new Error("graphToControls not set");