"use client";

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

import setSiteStore from "@/site/setSiteStore";
import setNoteStore from "@/note/setNoteStore";
import setAvatarStore from "@/avatar/setAvatarStore";
import setHOFStore from "@/hof/setHOFStore";
import setEtcStore from "@/etc/setEtcStore";

type QwilightStore = {
  noteStore: ReturnType<typeof setNoteStore>;
  siteStore: ReturnType<typeof setSiteStore>;
  avatarStore: ReturnType<typeof setAvatarStore>;
  hofStore: ReturnType<typeof setHOFStore>;
  etcStore: ReturnType<typeof setEtcStore>;
};

const qwilightStore = createContext<QwilightStore>({} as QwilightStore);
const { Provider } = qwilightStore;

export const Stores: FC<PropsWithChildren> = ({ children }) => (
  <Provider
    value={{
      noteStore: useLocalObservable(setNoteStore),
      siteStore: useLocalObservable(setSiteStore),
      avatarStore: useLocalObservable(setAvatarStore),
      hofStore: useLocalObservable(setHOFStore),
      etcStore: useLocalObservable(setEtcStore),
    }}
  >
    {children}
  </Provider>
);

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

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

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

export const useHOFStore = () => useContext(qwilightStore).hofStore;

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