import { createContext, useCallback, useContext, useMemo, useState } from 'react' import Modal from 'react-bootstrap/Modal' import BackArrow from '../svgs/arrow-left-line.svg' export const ShowModalContext = createContext(() => null) export function ShowModalProvider ({ children }) { const [modal, showModal] = useModal() const contextValue = showModal return ( {children} {modal} ) } export function useShowModal () { return useContext(ShowModalContext) } export default function useModal () { const [modalContent, setModalContent] = useState(null) const [modalOptions, setModalOptions] = useState(null) const [modalStack, setModalStack] = useState([]) const onBack = useCallback(() => { if (modalStack.length === 0) { return setModalContent(null) } const previousModalContent = modalStack[modalStack.length - 1] setModalStack(modalStack.slice(0, -1)) return setModalContent(previousModalContent) }, [modalStack, setModalStack]) const onClose = useCallback(() => { setModalContent(null) setModalStack([]) }, []) const modal = useMemo(() => { if (modalContent === null) { return null } return (
{modalStack.length > 0 ?
: null}
X
{modalContent}
) }, [modalContent, onClose]) const showModal = useCallback( (getContent, options) => { if (modalContent) { if (options?.replaceModal) { setModalStack(stack => ([])) } else setModalStack(stack => ([...stack, modalContent])) } setModalOptions(options) setModalContent(getContent(onClose)) }, [modalContent, onClose] ) return [modal, showModal] }