import { createContext, useCallback, useContext, useState } from "react"; interface ModalState { contentType: string; entityId?: string; entityLabel?: string; closeOnClickOutside?: boolean; } interface Props { children: React.ReactNode; } interface ModalContextType { isOpen: boolean; openModal: ( contentType: string, entityId?: string, entityLabel?: string, closeOnClickOutside?: boolean, ) => void; closeModal: () => void; closeModals: (count: number) => void; clearAllModals: () => void; modalContentType: string; entityId: string; entityLabel: string; closeOnClickOutside: boolean; modalStates: Record; setModalState: (modalType: string, state: any) => void; getModalState: (modalType: string) => any; clearModalState: (modalType: string) => void; clearAllModalStates: () => void; } const ModalContext = createContext(undefined); export const ModalProvider: React.FC = ({ children }) => { const [modalStack, setModalStack] = useState([]); const [modalStates, setModalStates] = useState>({}); const isOpen = modalStack.length > 0; const currentModal = modalStack[modalStack.length - 1]; const modalContentType = currentModal?.contentType || ""; const entityId = currentModal?.entityId || ""; const entityLabel = currentModal?.entityLabel || ""; const closeOnClickOutside = currentModal?.closeOnClickOutside ?? true; const openModal = useCallback( ( contentType: string, entityId?: string, entityLabel?: string, closeOnClickOutside?: boolean, ) => { const newModal: ModalState = { contentType, entityId, entityLabel, closeOnClickOutside, }; setModalStack((prev) => [...prev, newModal]); }, [], ); const closeModal = useCallback(() => { setModalStack((prev) => { if (prev.length <= 1) { return []; } return prev.slice(0, -1); }); }, []); const closeModals = useCallback((count: number) => { setModalStack((prev) => { const newLength = Math.max(0, prev.length - count); return prev.slice(0, newLength); }); }, []); const clearAllModals = useCallback(() => { setModalStack([]); }, []); const setModalState = useCallback((modalType: string, state: any) => { setModalStates((prev) => ({ ...prev, [modalType]: state, })); }, []); const getModalState = useCallback( (modalType: string) => { return modalStates[modalType]; }, [modalStates], ); const clearModalState = useCallback((modalType: string) => { setModalStates((prev) => { const newStates = { ...prev }; delete newStates[modalType]; return newStates; }); }, []); const clearAllModalStates = useCallback(() => { setModalStates({}); }, []); return ( {children} ); }; export const useModal = () => { const context = useContext(ModalContext); if (context === undefined) { throw new Error("useModal must be used within a ModalProvider"); } return context; };