import { For, Show } from "solid-js";
import { FLAG_CHARGING } from "./api";
import { ago, staleness } from "./live";
import MapView from "./Map";
import { useSession } from "./session";

export default function MapPage() {
  const s = useSession();

  return (
    <main class="split">
      <aside>
        <For each={s.order()} fallback={<p class="muted">nobody is sharing with you yet</p>}>
          {(id) => {
            const person = () => s.people[id];
            return (
              <button class="person" classList={{ active: s.selected() === id }} onClick={() => s.select(id)} disabled={!person()?.position}>
                <span class="name">{person()?.display_name}</span>
                <Show when={person()?.position} fallback={<span class="muted">no fix yet</span>}>
                  {(pos) => (
                    <span class="meta">
                      <span class={`dot ${staleness(pos().ts, s.serverTime())}`} />
                      {ago(pos().ts, s.serverTime())} ago
                      <Show when={pos().acc_dm !== null}>{" · ±" + Math.round(pos().acc_dm! / 10) + " m"}</Show>
                      <Show when={pos().bat_pct !== null}>{" · " + pos().bat_pct + "%" + (pos().flags & FLAG_CHARGING ? " ⚡" : "")}</Show>
                    </span>
                  )}
                </Show>
              </button>
            );
          }}
        </For>
      </aside>
      <MapView people={s.people} order={s.order} selected={s.selected} onSelect={s.select} trail={s.trail} />
    </main>
  );
}