import React, { useCallback, useEffect } from 'react';
// @ts-ignore
import { useBeforeUnload, useBlocker } from 'react-router-dom';
const Prompt = (props) => {
    const blocker = useBlocker(props.when);
    useBeforeUnload(useCallback((event) => {
        if (!props.when) {
            return;
        }
        event.preventDefault();
        event.returnValue = '';
    }, [props.when]), { capture: true });
    useEffect(() => {
        if (blocker.state !== 'blocked') {
            return;
        }
        let active = true;
        const confirmNavigate = async () => {
            // 是否关闭切换限制并跳转
            let toNext = false;
            if (props.message) {
                if (typeof props.message === 'string') {
                    toNext = window.confirm(props.message);
                }
                else {
                    toNext = await props.message();
                }
            }
            else {
                toNext = window.confirm('Are you sure to leave the page?');
            }
            if (!active) {
                return;
            }
            if (toNext) {
                blocker.proceed();
            }
            else {
                blocker.reset();
            }
        };
        confirmNavigate();
        return () => {
            active = false;
        };
    }, [blocker, props.message]);
    return <></>;
};
export default Prompt;