'use client';

import { observer } from 'mobx-react-lite';
import React, { createContext, useContext, useEffect } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { useAppModals } from '@/hooks/useAppModals';

type ModalContextType = Omit<ReturnType<typeof useAppModals>, 'modals'>;

const ModalContext = createContext<ModalContextType>(undefined as never);

export const ModalProvider: React.FC<React.PropsWithChildren> = observer(
  (props) => {
    const { menus: menusStore } = useStores();
    const appModals = useAppModals();
    const { modals, ...contextValue } = appModals;

    useEffect(() => {
      menusStore.setAppModalDisclosures(modals);
    }, [modals, menusStore]);
    return (
      <ModalContext.Provider value={contextValue}>
        {props.children}
      </ModalContext.Provider>
    );
  }
);

export function useModalContext() {
  return useContext(ModalContext);
}