import { Empty, helper, Button } from '@feewee/h5app-common';
import { useNavigate, useRouteError } from '@modern-js/runtime/router';
import { useCallback, useEffect } from 'react';

function ErrorBoundary() {
  const error: any = useRouteError();
  const navigate = useNavigate();

  const lisFn = useCallback((e: any) => {
    if ('hardwareBackPress' == e.data) {
      helper.checkBack(() => navigate(-1));
    }
  }, []);

  useEffect(() => {
    window.document.addEventListener('message', lisFn);

    return () => {
      window.document.removeEventListener('message', lisFn);
    };
  }, []);

  return (
    <Empty type="timeOut" className="pt-8 max-w-screen-md mx-auto" description={error?.message}>
      <div className="mt-8 mx-auto w-4/6">
        <Button type="primary" block size="large" onClick={() => helper.checkBack(() => navigate(-1))}>
          返回
        </Button>
      </div>
    </Empty>
  );
}
export default ErrorBoundary;