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

@customElement("mm-page")
export class MmPage extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: #121212;
        color: white;
        text-shadow: 0.6px 0.6px 0px #ffffff70;
        font-family: monospace;
        font-size: 135%;
      }
      div.message {
        color: #888;
      }
      .msgKey {
        color: #006699;
        padding-left: 14px;
      }
      .msgValue {
        color: #ff4500;
      }
      .metricName {
        color: #008000;
      }
      .metricLabelName {
        color: #9400d3;
      }
      .metricLabelValue {
        color: #ffc125;
      }
      .metricValue {
        color: #4169e1;
      }
    `,
  ];
  render() {
    return html`
      <h1>Mqtt metrics</h1>

      <div class="message">
        <div>
          Incoming mqtt message: <span class="msgKey">t</span>=<span class="msgValue">${"2024-08-09 14:43:28"}</span> <span class="msgKey">topic</span>=<span
            class="msgValue"
            >${"tr-air-quality/sensor/particulate_matter__10_0__m_concentration/state"}</span
          >
          <span class="msgKey">message</span>=<span class="msgValue">${"12"}</span>
        </div>
        <div>
          Converted to metrics event:
          <span class="metricName">pm_concentration</span>
          {
          <span class="metricLabelName">location</span>="<span class="metricLabelValue">rr</span>", <span class="metricLabelName">size</span>="<span
            class="metricLabelValue"
            >10</span
          >" } value=<span class="metricValue">12</span>
        </div>
      </div>

      <p>
        <a href="metrics">metrics</a> |
      </p>
      <bigast-loginbar></bigast-loginbar>
    `;
  }
}