import { browser } from "$app/environment";

const NAV_KEY = "beaver.ui.nav";
const RAIL_KEY = "beaver.ui.rail";

function stored(key: string, fallback: boolean): boolean {
  if (!browser) {
    return fallback;
  }
  const raw = localStorage.getItem(key);
  return raw === null ? fallback : raw === "1";
}

function store(key: string, value: boolean): void {
  if (browser) {
    localStorage.setItem(key, value ? "1" : "0");
  }
}

// Chrome state: the section sidebar and the conversation rail. Explicit
// toggles persist; the automatic collapse on the conversations pages does
// not, so leaving them restores what the user had.
class Ui {
  nav = $state(stored(NAV_KEY, true));
  rail = $state(stored(RAIL_KEY, true));

  setNav(open: boolean, persist = false): void {
    this.nav = open;
    if (persist) {
      store(NAV_KEY, open);
    }
  }

  toggleNav(): void {
    this.setNav(!this.nav, true);
  }

  toggleRail(): void {
    this.rail = !this.rail;
    store(RAIL_KEY, this.rail);
  }
}

export const ui = new Ui();