import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
import useStateBinding from "./useStateBinding"
import type { UIState } from "@racletteCore/store/types"

export default () => {
  const { state } = useStateSubscriber("ui")

  const createUiStateBinding = useStateBinding("ui", "ui/update")

  const locale = createUiStateBinding<string>("locale")
  const theme = createUiStateBinding<"light" | "dark">("theme")
  const mobile = createUiStateBinding<boolean>("mobile")
  const loading = createUiStateBinding<boolean>("loading")
  const landingPage = createUiStateBinding<string>("landingPage")
  const availableInterfaces = createUiStateBinding<
    UIState["availableInterfaces"]
  >("availableInterfaces")

  return {
    state,
    locale,
    theme,
    mobile,
    loading,
    landingPage,
    availableInterfaces,
  }
}
