import { createSignal, Match, Switch } from 'solid-js';
import { NavigationScope, useBridge } from '@loomgui/bridge';

export default function App() {
  const bridge = useBridge();
  const [error, setError] = createSignal('');

  function run(action: () => Promise<void>) {
    setError('');
    void action().catch((cause: unknown) => setError(String(cause)));
  }

  return (
    <main>
      <Switch>
        <Match when={bridge.currentScreen === 'Hud'}>
          <div class="hud">
            <p>Score: {bridge.score}</p>
            <button onClick={() => run(() => bridge.pause())}>Pause</button>
          </div>
        </Match>
        <Match when={bridge.currentScreen === 'Pause'}>
          <div class="pause-backdrop">
            <NavigationScope
              name="pause"
              defaultFocus="#resume"
              backTarget="#resume"
              class="pause-menu"
            >
              <h1>Paused</h1>
              <p>Score: {bridge.score}</p>
              <button id="resume" onClick={() => run(() => bridge.resume())}>
                Resume
              </button>
              <button id="reset-score" onClick={() => run(() => bridge.resetScore())}>
                Reset score
              </button>
            </NavigationScope>
          </div>
        </Match>
      </Switch>
      <p class="error" role="alert">{error()}</p>
    </main>
  );
}