import React, { Component } from 'react';

import { Route, Switch } from "react-router-dom";
import CNotificationHOC from '../courses/common/CNotificationHOC'
import Loading from '../../Loading';

import Loadable from 'react-loadable';

import TPMIndexHOC from '../tpm/TPMIndexHOC';

import { SnackbarHOC } from 'educoder';
import AccountNav from './account/AccountNav'
import AccountBasic from './account/AccountBasic'
import axios from 'axios'
console.log(AccountBasic, '00000000')

const AccountBasicEdit = Loadable({
  loader: () => import('./account/AccountBasicEdit'),
  loading: Loading,
})

const AccountCertification = Loadable({
  loader: () => import('./account/AccountCertification'),
  loading: Loading,
})

const AccountSecure = Loadable({
  loader: () => import('./account/AccountSecure'),
  loading: Loading,
})

const AccountBinding = Loadable({
  loader: () => import('./account/AccountBinding'),
  loading: Loading,
})
class AccountPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      basicInfo: {}
    }
  }

  componentDidUpdate = (prevState) => {
    if (this.props.current_user && this.props.current_user != prevState.current_user) {
      this.getBasicInfo(this.props.current_user.login);
    }
  }

  componentDidMount = () => {
    if (this.props.current_user) {
      this.getBasicInfo(this.props.current_user.login);
    }
  }

  getBasicInfo = (login) => {
    let url = `/users/accounts/${login || this.props.current_user.login}.json`;
    axios.get(url).then((result) => {
      if (result.data) {
        if (result.data && result.data.base_info_completed == false) {
          this.props.history.push(`/account/profile/edit`);
        }
        this.setState({
          basicInfo: Object.assign({}, { ...result.data }, {
            avatar_url: `${result.data.avatar_url}`,
            gender: result.data.gender == null || result.data.gender == undefined ? 0 : result.data.gender
          })
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }
  render() {
    let { basicInfo } = this.state;
    const common = { basicInfo, getBasicInfo: this.getBasicInfo }
    return (
      <div className="newMain clearfix">
        <div className="educontent df pt20">
          <style>{`
                .accountPage {
                  display: flex;
                }
                .basicFormWrap{
                  flex:1;
                  width: 0;
                }

                /* 左侧 */
                .accountNav {
                  width: 290px;
                  box-shadow: 0px 4px 9px 0px rgba(11,62,120,0.21);
                  border-radius: 2px;
                  padding-top: 8px;
                  padding-bottom: 30px;
                  margin-bottom:30px;
                  margin-right:20px;
                  height: 460px;
                }
              `}</style>
          <AccountNav {...this.props} {...common}></AccountNav>
          <div className="basicFormWrap">
            <Switch {...this.props}>
              <Route path="/account/profile/edit"
                render={
                  (props) => (<AccountBasicEdit {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route path="/account/profile"
                render={
                  (props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route path="/account/certification"
                render={
                  (props) => (<AccountCertification {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route path="/account/secure"
                render={
                  (props) => (<AccountSecure {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route path="/account/binding"
                render={
                  (props) => (<AccountBinding {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route exact path="/account"
                render={
                  (props) => (<AccountBasic getBasicInfo={() => this.getBasicInfo()} {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>


            </Switch>
          </div>
        </div>
      </div>
    );
  }
}

export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(AccountPage)));