import { createContext, FC, PropsWithChildren, useContext } from "react";
import { useLocalObservable } from "mobx-react-lite";

import setTaehuiStore from "src/taehui/setTaehuiStore";
import setAvatarStore from "src/avatar/setAvatarStore";
import setForumStore from "src/forum/setForumStore";

type MainStore = {
  taehuiStore: ReturnType<typeof setTaehuiStore>;
  avatarStore: ReturnType<typeof setAvatarStore>;
  forumStore: ReturnType<typeof setForumStore>;
};

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

export const Stores: FC<PropsWithChildren> = ({ children }) => (
  <Provider
    value={{
      taehuiStore: useLocalObservable(setTaehuiStore),
      avatarStore: useLocalObservable(setAvatarStore),
      forumStore: useLocalObservable(setForumStore),
    }}
  >
    {children}
  </Provider>
);

export const useTaehuiStore = () => useContext(mainStore).taehuiStore;

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

export const useForumStore = () => useContext(mainStore).forumStore;