import { useSyncExternalStore } from 'react'

/**
 * The switches a browser keeps for an application, each off until set: keys maps each setting to its localStorage key.
 * browserSetting reads one, setBrowserSetting keeps it and tells every user of useBrowserSetting, which follows it as
 * it changes in this tab or in another tab of the browser. event names the event a change dispatches on window.
 */
export function createBrowserSettings<K extends string>(keys: Record<K, string>, event: string) {
  function browserSetting(setting: K) {
    return window.localStorage.getItem(keys[setting]) === 'on'
  }

  function setBrowserSetting(setting: K, enabled: boolean) {
    window.localStorage.setItem(keys[setting], enabled ? 'on' : 'off')
    window.dispatchEvent(new Event(event))
  }

  function subscribe(changed: () => void) {
    window.addEventListener(event, changed)
    window.addEventListener('storage', changed)
    return () => {
      window.removeEventListener(event, changed)
      window.removeEventListener('storage', changed)
    }
  }

  function useBrowserSetting(setting: K) {
    return useSyncExternalStore(subscribe, () => browserSetting(setting))
  }

  return { browserSetting, setBrowserSetting, useBrowserSetting }
}