import React from 'react';
import {Error, Loading} from 'frc-ui-pro';
import UserCache from '@caches/UserCache';
import axios, {initAxios} from '@utils/axios';
import {userUrl} from '@constants/urls';
import {checkUserInQb} from '@utils';

initAxios();

interface IProps {
  children: React.ReactNode;
}

interface IState {
  hasError: boolean;
  check: boolean;
}

class ErrorBoundary extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      check: true
    };
  }

  componentDidMount() {
    if (UserCache.user) {
      this.setState({
        check: false
      });
    } else {
      this.handleUserInfo();
    }
  }

  static getDerivedStateFromError() {
    return {hasError: true};
  }

  componentDidCatch(error) {
    console.error(error);
  }

  handleUserInfo = async () => {
    if (!UserCache.user) {
      const data: any = await axios.get(userUrl);

      if (data.content) {
        UserCache.user = data.content;
        axios.defaults.headers.common['userId'] = UserCache.user.userId;
      }
    }
    this.setState({
      check: false
    });
    checkUserInQb();
  };

  render() {
    const {hasError, check} = this.state;
    if (hasError) {
      return <Error />;
    }
    if (check) {
      return <Loading />;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;