import { formatNumber } from "./helpers";
import { For, Switch, Match } from "solid-js";

type ScalarEntry = {
  type: "scalar",
  label: string,
  value: number,
}
type VectorEntry = {
  type: "vector",
  label: string,
  vector: [number, number]
  components: [string, string],
}
type HeaderEntry = {
  type: "header",
  label: string,
}

export type ObservableEntry =
| ScalarEntry
| VectorEntry
| HeaderEntry


export function ObservablesPanel(props: { data: ObservableEntry[] }) {
  return (
    <div
      class="observables-container"
      style={{
        display: "grid",
        // 1: Main Label | 2: Sub-label X | 3: Value X | 4: Sub-label Y | 5: Value Y
        "grid-template-columns": "auto min-content 1fr min-content 1fr",
        "align-items": "baseline",
      }}
    >
      <For each={ props.data }>
        { (item: ObservableEntry) => (

          <Switch>
            <Match when={ item.type === "header" }>
              <div
                class="observables-header"
                style="grid-column: 1 / -1"
              >
                { item.label }
              </div>
            </Match>

            <Match when={ item.type === "scalar" }>
              <div class="observables-row scalar-row" style="display: contents">
                <span class="observables-label">{ item.label }</span>
                <span class="observables-value scalar-value" style="grid-column: 2 / -1">
                  { formatNumber((item as ScalarEntry).value) }
                </span>
              </div>
            </Match>

            <Match when={ item.type === "vector" }>
              <div class="observables-row vector-row" style="display: contents">
                <span class="observables-label">{ item.label }</span>

                <span class="observables-component-label">
                  { (item as VectorEntry).components[0] }:
                </span>
                <span class="observables-value">
                  { formatNumber((item as VectorEntry).vector[0]) }
                </span>
                <span class="observables-component-label">
                  { (item as VectorEntry).components[1] }:
                </span>
                <span class="observables-value">
                  { formatNumber((item as VectorEntry).vector[1]) }
                </span>
              </div>
            </Match>
          </Switch>
        )}
      </For>
    </div>
  );
}

