"use client";

import setAvatarStore from "@/app/[language]/avatar/state/setAvatarStore";
import setHallStore from "@/app/[language]/hall/state/setHallStore";
import setNoteStore from "@/app/[language]/note/state/setNoteStore";
import setSiteStore from "@/app/[language]/site/state/setSiteStore";
import { useLocalObservable } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { createContext, FC, PropsWithChildren, useContext } from "react";

type MainStore = {
  noteStore: ReturnType<typeof setNoteStore>;
  siteStore: ReturnType<typeof setSiteStore>;
  avatarStore: ReturnType<typeof setAvatarStore>;
  hallStore: ReturnType<typeof setHallStore>;
};

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

export const Stores: FC<PropsWithChildren> = ({ children }) => {
  const t = useTranslations();

  return (
    <Provider
      value={{
        noteStore: useLocalObservable(setNoteStore),
        siteStore: useLocalObservable(() => setSiteStore(t)),
        avatarStore: useLocalObservable(setAvatarStore),
        hallStore: useLocalObservable(setHallStore),
      }}
    >
      {children}
    </Provider>
  );
};

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

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

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

export const useHallStore = () => useContext(mainStore).hallStore;