import { LitElement, PropertyValueMap, css, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";


@customElement("metric-row")
export class MetricRow extends LitElement {
  static styles = [
    css`
      :host > div {
        border: solid #eee;
        border-width: 1px 0;
      }
      :host > div > span {
        display: inline-block;
      }
      span.label {
        width: 20em;
      }
      span.vmval {
        width: 2em;
      }
      span.asof {
        width: 15em;
      }
      .vmval {
        font-weight: bold;
      }
      .asof {
        color: gray;
      }
    `,
  ];
  @property() label: string = "??";
  @property() q: string = "";
  @state() resultTime?: Date;
  @state() resultValue?: string;
  render() {
    const graphUrl = new URL("https://bigasterisk.com/m/vmui/#/");

    graphUrl.searchParams.append("g0.expr", this.q);
    graphUrl.searchParams.append("g0.range_input", "6h");
    graphUrl.searchParams.append("g0.relative_time", "last_6_hours");
    return html`<div>
      <span class='label'>${this.label}</span>
      <span class="vmval"> ${this.resultValue || "..."} </span>
      <span class="asof">${this.resultTime ? html`as of ${this.resultTime.toLocaleString("sv")}` : []}</span>
      <span class='graph'><a href="${graphUrl.toString()}">[graph]</a>
    </div>`;
  }

  protected async update(changedProperties: PropertyValueMap<this>) {
    if (changedProperties.has("q") && this.q) {
      this.getMetricValue(this.q);
    }
    super.update(changedProperties);
  }

  async getMetricValue(q: string) {
    const vmapi = "https://bigasterisk.com/m/prometheus/api/v1";
    const queryUrl = new URL(vmapi + "/query");
    queryUrl.searchParams.append("query", q);
    const resp = await (await fetch(queryUrl)).json();
    const v = resp.data.result[0].value;
    this.resultTime = new Date(v[0] * 1000);
    this.resultValue = v[1];
  }
}