import React from "react";
import {isRouteErrorResponse, useNavigate, useRouteError} from 'react-router-dom';
import {Button} from "antd";

import error500 from "@/assets/images/error/Error500.png";
// ==============================|| ELEMENT ERROR - COMMON ||============================== //
const ErrorBoundary: React.FC<{
	minHeight?: string | number;
	errorCode?: 401 | 404 | 503
}> = ({ errorCode}) => {
	const error = useRouteError() as Error;
	let errorMessage = '服务异常,请稍后再试或者联系管理员.'

	const errorConfig: {
		[key: number]: string
	} = {
		401: '您没有权限访问本页面!',
		404: '访问的页面不存在!',
		503: '服务异常请联系管理员!',
	}
	if (isRouteErrorResponse(error)) {
		if (errorConfig[error.status]) {
			errorMessage = `Error ${error.status} - ${errorConfig[error.status]}`;
		}
	}
	if (errorCode) {
		if (errorConfig[errorCode]) {
			errorMessage = `Error ${errorCode} - ${errorConfig[errorCode]}`;
		}
	}
	const navigate = useNavigate()
	const handleGoBack = () => {
		navigate('/')
	}
	return (<div className="max-w-screen-lg mx-auto flex items-center h-screen">
		<div className={'flex flex-row '}>
			<div className="flex-col">
				<div className="sm:w-396px">
					<img src={error500} alt="error" className="w-full"/>
				</div>
			</div>
			<div className="flex-col md:w-full ml-10">
				<div className="text-center">
					<div className="text-4xl">
						Internal Server Error
					</div>
					<div className="text-gray-400 my-5">
						{errorMessage}
					</div>
					{process.env.NODE_ENV == 'development' && error && <div>
                        <pre style={{
	                        font: 'inherit',
	                        textAlign: 'left',
	                        maxWidth: 700,
	                        marginTop: 20,
	                        maxHeight: 300,
	                        overflow: 'auto'
                        }}>
                            <code style={{
	                            wordBreak: 'break-all',
	                            font: 'inherit',
	                            whiteSpace: 'break-spaces'
                            }}>{error.stack}</code>
                        </pre>
                    </div>}
					<div className="flex flex-grow gap-2 mt-5 justify-center">
						<Button type='primary' className="px-5" onClick={handleGoBack}>
							<h1>返回首页</h1>
						</Button>
					</div>
				</div>
			</div>
		</div>
	</div>);
};

export default ErrorBoundary;
