import debug from "debug";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { NamedNode } from "n3";
export { ResourceDisplay } from "../ResourceDisplay";

debug.enable("*");
const log = debug("device-el");

@customElement("light9-collector-device")
export class Light9CollectorDevice extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
        break-inside: avoid-column;
        font-size: 80%;
      }
      h3 {
        margin-top: 12px;
        margin-bottom: 0;
      }
      td {
        white-space: nowrap;
      }

      td.nonzero {
        background: #310202;
        color: #e25757;
      }
      td.full {
        background: #2b0000;
        color: red;
        font-weight: bold;
      }
    `,
  ];

  render() {
    return html`
      <h3><resource-display .uri=${this.uri}></resource-display></h3>
      <table class="borders">
        <tr>
          <th>out attr</th>
          <th>value</th>
          <th>chan</th>
        </tr>
        ${this.attrs.map(
          (item) => html`
            <tr>
              <td>${item.attr}</td>
              <td class=${item.valClass}>${item.val} →</td>
              <td>${item.chan}</td>
            </tr>
          `
        )}
      </table>
    `;
  }
  @property({
    // todo don't rebuild uri; pass it right
    converter: (s: string | null) => new NamedNode(s || ""),
  })
  uri: NamedNode = new NamedNode("");
  @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];

  constructor() {
    super();
  }
  //  observers: [
  //    "initUpdates(updates)",
  //  ],
  // initUpdates(updates) {
  //   updates.addListener(function (msg) {
  //     if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {
  //       this.set("attrs", msg.outputAttrsSet.attrs);
  //       this.attrs.forEach(function (row) {
  //         row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
  //       });
  //     }
  //   });
  // }
}