export type DisplaySurface = "top" | "bottom";

const DISPLAY_SURFACE_EVENT = "thor:display-surface";
let currentSurface: DisplaySurface = "top";

export function requestDisplaySurface(surface: DisplaySurface) {
  currentSurface = surface;
  window.dispatchEvent(new CustomEvent<DisplaySurface>(DISPLAY_SURFACE_EVENT, { detail: surface }));
}

export function getDisplaySurface() {
  return currentSurface;
}

export function subscribeDisplaySurface(listener: (surface: DisplaySurface) => void) {
  const onSurface = (event: Event) => {
    currentSurface = (event as CustomEvent<DisplaySurface>).detail;
    listener(currentSurface);
  };
  window.addEventListener(DISPLAY_SURFACE_EVENT, onSurface);
  return () => window.removeEventListener(DISPLAY_SURFACE_EVENT, onSurface);
}
