import { el } from "./dom.js";
import { loadSegmentsConfig } from "./segments-config.js";
import { loadStations } from "./stations.js";

let configLoaded = false;

function show(viewName) {
  const monitor = document.querySelector("[data-view='monitor']");
  const config = document.querySelector("[data-view='config']");
  if (monitor) monitor.classList.toggle("hidden", viewName !== "monitor");
  if (config) config.classList.toggle("hidden", viewName !== "config");

  const tabMon = el("tabMonitor");
  const tabCfg = el("tabConfig");
  if (tabMon) tabMon.classList.toggle("active", viewName === "monitor");
  if (tabCfg) tabCfg.classList.toggle("active", viewName === "config");

  if (viewName === "config" && !configLoaded) {
    configLoaded = true;
    Promise.allSettled([loadStations(), loadSegmentsConfig()]);
  }
}

export function bindViewTabs() {
  const tabMon = el("tabMonitor");
  const tabCfg = el("tabConfig");
  if (tabMon) tabMon.addEventListener("click", () => show("monitor"));
  if (tabCfg) tabCfg.addEventListener("click", () => show("config"));
  show("monitor");
}