import './userControl.css';
import { images } from '../../resources.json';
import { UserContext } from '../../helper/Context';
import Spinner from '../Spinner/Spinner';
import { get } from '../../helper/axios';
import { apis } from '../../helper/apis';
import { alert } from '../../helper/alert';
import History from '../../helper/history';

export default function UserControl(props) {
  return (
    <UserContext.Consumer>
      {({ userData, setUserData }) => (
        userData.role === 2
        ? (
          <div className="user">
            <button
              className="btn btn-hollow btn-straight"
              onClick={() => {
                localStorage.setItem('jwt', '');
                setUserData({ role: -1, name: '' });
                History.force('/login');
              }}
            >退出审核</button>
          </div>
        )
        : (
          <div className="user">
            {
              userData.role === -1
              ? (
                <Spinner />
              )
              : (
                <div className="user-avatar">
                  <img src={images.avatar} alt="user avatar" />
                </div>
              )
            }
            <div className="user-name">{userData.name || "加载中"}</div>
            {
              (() => {
                if (userData.role === 1 && History.getHref().match(/^\/admin.*/))
                  History.force('/');
                if (userData.role !== -1 || !localStorage.getItem('jwt')) return null;
                get(apis.getProfile).then(({ data, status, networkStatus }) => {
                  if (networkStatus !== 200) return;
                  if (!status) return alert('获取用户信息失败：' + data + '，请稍候刷新再试');
                  setUserData({
                    name: data.realName,
                    role: data.role
                  });
                });
                return null;
              })()
            }
          </div>
        )
      )}
    </UserContext.Consumer>
  );
}