import debug from "debug";
const log = debug("listbox");
import { css, html, LitElement } 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>
    `;
  }
  properties: {
    choices: { type: Array };
    value: { type: String; notify: true };
  };
  observers: ["onValue(value)"];
  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;
    }
    this.value = ev.target.uri;
  }
  onValue(value) {
    if (value === null) {
      this.clear();
    }
  }
  clear() {
    this.async(
      function () {
        this.querySelectorAll("paper-item").forEach(function (item) {
          item.blur();
        });
        this.value = undefined;
      }.bind(this)
    );
  }
}