import React from 'react';
import { Button } from 'antd';
import { ECode } from '../../types/ErrorPage';
import { ReactComponent as Light403Icon } from './assets/svg/assets-result-403.svg';
import { ReactComponent as Light404Icon } from './assets/svg/assets-result-404.svg';
import { ReactComponent as Light500Icon } from './assets/svg/assets-result-500.svg';
import { ReactComponent as LightMaintenanceIcon } from './assets/svg/assets-result-maintenance.svg';
import { ReactComponent as LightBrowserIncompatibleIcon } from './assets/svg/assets-result-browser-incompatible.svg';
import { ReactComponent as LightNetworkErrorIcon } from './assets/svg/assets-result-network-error.svg';
import { getErrorPageCopy, translateErrorPageText, } from '../../utils/errorPage';
import './web.less';
const errorInfo = {
    [ECode.forbidden]: {
        title: '403 Forbidden',
        desc: '抱歉，您无权限访问此页面。',
        icon: <Light403Icon />,
    },
    [ECode.notFound]: {
        title: '404 Not Found',
        desc: '抱歉，您访问的页面不存在。',
        icon: <Light404Icon />,
    },
    [ECode.error]: {
        title: '500 Internal Server Error',
        desc: '抱歉，服务器出错啦！',
        icon: <Light500Icon />,
    },
    [ECode.networkError]: {
        title: '网络异常',
        desc: '网络异常，请稍后再试。',
        icon: <LightNetworkErrorIcon />,
    },
    [ECode.browserIncompatible]: {
        title: '浏览器版本低',
        desc: '抱歉，您正在使用的浏览器版本过低，无法打开当前网页。',
        icon: <LightBrowserIncompatibleIcon />,
    },
    [ECode.maintenance]: {
        title: '系统维护中',
        desc: '系统维护中，请稍后再试。',
        icon: <LightMaintenanceIcon />,
    },
    [ECode.pageCrash]: {
        title: '抱歉，网页崩溃了',
        desc: '网页似乎遇到了问题，我们将尽快解决，请稍后重新加载。',
        icon: <Light404Icon />,
    },
    [ECode.pageUpdate]: {
        title: '网页有更新',
        desc: '检查到网页有更新，请刷新以查看最新内容。',
        icon: <Light404Icon />,
    },
    [ECode.pageDataCacheFailure]: {
        title: '数据缓存失效',
        desc: '非常抱歉，数据缓存已失效。请点击【清除缓存】以更新信息。',
        icon: <Light404Icon />,
    },
};
export default function Render(props) {
    const { code, icon, title, desc, children, content, status, error } = props.data;
    const { t, goBack, clearData } = props.methods;
    const copy = getErrorPageCopy(error, {
        code,
        status,
    });
    const resolvedCode = copy?.code || code;
    const info = errorInfo[resolvedCode];
    const prefixCls = 'oak';
    const backed = resolvedCode === ECode.notFound || resolvedCode === ECode.forbidden;
    return (<div className={`${prefixCls}-errorPage`}>
            {icon || info?.icon}
            <div className={`${prefixCls}-errorPage__title`}>
                {title || (copy
            ? translateErrorPageText(t, copy.titleKey, copy.titleFallback)
            : info?.title)}
            </div>
            <div className={`${prefixCls}-errorPage__description`}>
                {desc || (copy
            ? translateErrorPageText(t, copy.descKey, copy.descFallback)
            : info?.desc)}
            </div>
            {content}
            {children || (<Button type="primary" onClick={() => {
                switch (resolvedCode) {
                    case ECode.forbidden:
                    case ECode.notFound: {
                        goBack();
                        break;
                    }
                    case ECode.pageDataCacheFailure: {
                        clearData();
                        window.location.reload();
                        break;
                    }
                    case ECode.networkError:
                    case ECode.browserIncompatible:
                    case ECode.maintenance:
                    case ECode.pageCrash:
                    case ECode.pageUpdate:
                    default: {
                        window.location.reload();
                        break;
                    }
                }
            }}>
                    {backed
                ? t('common::back', {
                    '#oakModule': 'oak-frontend-base',
                })
                : t('common::refresh', {
                    '#oakModule': 'oak-frontend-base',
                })}
                </Button>)}
        </div>);
}