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 = "?";
  @property({ type:Boolean, attribute: "metrics" }) hasMetrics: boolean = false;
  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;
        min-width: 9em;
      }
      .window {
      }
      .serviceGrid > td {
        border: 5px solid red;
        display: inline-block;
      }
      .big {
        font-size: 120%;
        display: inline-block;
        padding: 10px 0;
      }

      :host > div {
        display: inline-block;
        vertical-align: top;
      }
      :host > div:nth-child(2) {
        width: 9em;
      }
    `,
  ];

  render() {
    return html`
      <div>
        <div class="left"><a class="big" href="${this.name}/">${this.name}</a></div>
        <div class="window"><button @click="${this.click}">window</button></div>
        ${this.hasMetrics ? html`<div><a href="${this.name}/metrics">metrics</a></div>` : ""}
      </div>

      ${this.hasMetrics ? html`<div id="stats"><stats-line name="${this.name}"></div>` : ""}
      `;
  }

  click() {
    window.open(this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
  }
}