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

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

export { StatsLine } from "./StatsLine";

@customElement("service-button-row")

export class ServiceButtonRow extends LitElement {

  @property() name: string = "?";

  static styles = [

    css`

      :host {

        padding-bottom: 10px;

        border-bottom: 1px solid #333;

      }

      a {

        color: #7d7dec;

      }

      div {

        display: flex;

        justify-content: space-between;

        padding: 2px 3px;

      }

      .left {

        display: inline-block;

        margin-right: 3px;

        flex-grow: 1;

      }

      .window {

      }

      .serviceGrid > td {

        border: 5px solid red;

        display: inline-block;

  render() {

    return html` <span class="${this.resClasses()}">

      <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>

    </span>`;

    // <template is="dom-if" if="{{rename}}">

    //   <button on-click="onRename">Rename</button>

    //   <paper-dialog id="renameDialog" modal on-iron-overlay-closed="onRenameClosed">

    //     <p>

    //       New label:

    //       <input id="renameTo" autofocus type="text" value="{{renameTo::input}}" on-keydown="onRenameKey" />

    //     </p>

    //     <div class="buttons">

    //       <paper-button dialog-dismiss>Cancel</paper-button>

    //       <paper-button dialog-confirm>OK</paper-button>

    //     </div>

    //   </paper-dialog>

    // </template>

    //    `;

  }

  // callers might set this as string or pass a NamedNode.

  @property() uri?: NamedNode | string;

  @state() label: string = "";

  // @state() renameTo: String; notify: true };

  constructor() {

    super();

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

      this.graph = g;

      this.runUriHandler();

    });

  }

  realUri(): NamedNode {

    if (!this.uri) {

      return new NamedNode("");

    }

    return typeof this.uri === "string" ? new NamedNode(this.uri) : this.uri;

  }

  href() {

    if (!this.uri) {

      return "javascript:;";

    }

    return typeof this.uri === "string" ? this.uri : this.uri.value;

  }