import { createContext, ReactNode, useContext } from "react";
import { useLocalObservable } from "mobx-react-lite";
import setQwilightStore from "src/qwilight/setQwilightStore";
import setSiteStore from "src/site/setSiteStore";
import setNoteStore from "src/note/setNoteStore";
import setAvatarStore from "src/avatar/setAvatarStore";
import setEtcStore from "src/etc/setEtcStore";
import setWowStore from "src/wow/setWowStore";

type MainStore = {
  qwilightStore: ReturnType<typeof setQwilightStore>;
  noteStore: ReturnType<typeof setNoteStore>;
  siteStore: ReturnType<typeof setSiteStore>;
  avatarStore: ReturnType<typeof setAvatarStore>;
  etcStore: ReturnType<typeof setEtcStore>;
  wowStore: ReturnType<typeof setWowStore>;
};

const mainStore = createContext<MainStore>({} as MainStore);
const { Provider } = mainStore;

export const Stores = ({ children }: { children: ReactNode }) => (
  <Provider
    value={{
      qwilightStore: useLocalObservable(setQwilightStore),
      noteStore: useLocalObservable(setNoteStore),
      siteStore: useLocalObservable(setSiteStore),
      avatarStore: useLocalObservable(setAvatarStore),
      etcStore: useLocalObservable(setEtcStore),
      wowStore: useLocalObservable(setWowStore),
    }}
  >
    {children}
  </Provider>
);

export const useQwilightStore = () => useContext(mainStore).qwilightStore;

export const useSiteStore = () => useContext(mainStore).siteStore;

export const useNoteStore = () => useContext(mainStore).noteStore;

export const useAvatarStore = () => useContext(mainStore).avatarStore;

export const useEtcStore = () => useContext(mainStore).etcStore;

export const useWowStore = () => useContext(mainStore).wowStore;