import { useContext } from 'react';
import { Button, Result, message } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { Outlet, useLocation, } from 'react-router-dom';

const ProtectedRoute = ({ auth }) => {
  const { auth_store } = useContext(stores_Context);

  if (auth_store.has_permission(auth)) {
    return <Outlet />;
  }

  const authApplyLink =
    // eslint-disable-next-line max-len
    'dingtalk://dingtalkclient/action/openapp?app_id=-4&container_type=work_platform&corpid=ding48bce8fd3957c96b&ddtab=true&redirect_type=jump&redirect_url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fmobile%2Fhomepage.htm%3Fback_control%3Dfalse%26backcontrol%3Dfalse%26corpid%3Dding48bce8fd3957c96b%26dd_progress%3Dfalse%26dd_share%3Dfalse%26ddtab%3Dtrue%26showmenu%3Dfalse%23%2Fcustom%3Fpcredirect%3Dself%26processCode%3DPROC-C0C2E970-1E4E-44CF-A389-C7D3F10A7885';

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      message.success('已复制到剪贴板');
    });
  };

  const { pathname } = useLocation();
  const applyInfo = `授权账户: ${auth_store.user.name}(${auth_store.user.userid})\n申请权限: ${auth[auth.length - 1].toString()}\n请求页面: ${pathname}`;

  return (
    <div>
      {/* '试着联系一下技术，所需权限: ' + auth.toString() */}
      <Result
        status="403"
        title="403 权限不足"
        subTitle={
          <>
            <div>
              复制以下信息到OA审批申请
              <Button type="link" onClick={() => copyToClipboard(applyInfo)}>复制</Button>
            </div>
            <pre>
              {applyInfo}
            </pre>
          </>
        }
        extra={<Button type="link" href={authApplyLink}>去申请</Button>}
      />
    </div>
  );
};
export default observer(ProtectedRoute);