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

type ConversionEvent = {
  message: {
    t: number;
    topic: string;
    payload: string;
  };
  metricEvent: {
    name: string;
    labels: {
      labelName: string;
      labelValue: string;
    }[];
    value: string;
  };
};

@customElement("mm-page")
export class MmPage extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: #121212;
        color: white;
        text-shadow: 0.6px 0.6px 0px #ffffff70;
        font-family: monospace;
        font-size: 135%;
      }
    `,
  ];
  @state() displayedMessages: ConversionEvent[] = [];

  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties);
    new EventSource("api/debugEvents").addEventListener("message", (ev) => {
      this.displayedMessages.push(JSON.parse(ev.data));
      const maxShown = 20;
      if (this.displayedMessages.length > maxShown) {
        this.displayedMessages = this.displayedMessages.slice(-maxShown);
      }
      this.requestUpdate();
    });
  }

  render() {
    return html`
      <h1>Mqtt metrics</h1>

      ${this.displayedMessages.map((ev) => html`<mm-conversion-event .ev=${ev}></mm-conversion-event>`)}
      <p><a href="metrics">metrics</a> |</p>
      <bigast-loginbar></bigast-loginbar>
    `;
  }
}

@customElement("mm-conversion-event")
export class MmConversionEvent extends LitElement {
  static styles = [
    css`
      div.message {
        color: #888;
        margin-bottom: 1em;
      }
      .msgKey {
        color: #006699;
        padding-left: 1em;
      }
      .msgValue {
        color: #ff4500;
      }
      .metricName {
        color: #008000;
      }
      .metricLabelName {
        color: #9400d3;
      }
      .metricLabelValue {
        color: #ffc125;
      }
      .metricValue {
        color: #4169e1;
      }
    `,
  ];
  @property() ev?: ConversionEvent;
  render() {
    if (!this.ev) return html``;
    const ev = this.ev;
    const t = new Date(ev.message.t * 1000);
    return html`<div class="message">
      <div>
        Incoming mqtt message:
        <span class="msgKey">t</span>=<span class="msgValue"> ${t.toLocaleString("sv")} </span> <span class="msgKey">topic</span>=<span class="msgValue"
          >${ev.message.topic}</span
        >
        <span class="msgKey">payload</span>=<span class="msgValue">${ev.message.payload}</span>
      </div>
      <div>
        Converted to metric:
        <span class="metricName">${ev.metricEvent.name}</span>

        {${ev.metricEvent.labels.map(
          (l, i) => html`
            <span class="metricLabelName">${l.labelName}</span>=<span class="metricLabelValue">${l.labelValue}</span>

            ${i < ev.metricEvent.labels.length - 1 ? "," : "}"}
          `
        )}
        value=<span class="metricValue">${ev.metricEvent.value}</span>
      </div>
    </div>`;
  }
}