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

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({
    converter: acceptStringOrUri(),
  })
  uri: NamedNode = new NamedNode("");
  @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];

  setAttrs(attrs: any) {
    this.attrs = attrs;
    this.attrs.forEach(function (row: any) {
      row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
    });
  }
}

function acceptStringOrUri() {
  return (s: string | null) => new NamedNode(s || "");
}