import React, { Component } from 'react';

import Comments from '../comment/Comments'

import commentHOC from '../comment/CommentsHOC'

import './TPMShixunDiscuss.css'

import TPMRightSection from './component/TPMRightSection'
import TPMNav from './component/TPMNav'
import Loading from '../../components/loading';


class TPMShixunDiscuss extends Component {
  constructor(props) {
    super(props)

  }

  componentWillReceiveProps(newProps, newContext) {
    if (newProps.shixun && newProps.shixun.id && (!this.props || !this.props.shixun || this.props.shixun.id != newProps.shixun.id)) {
      window.document.title = newProps.shixun.name
      // this.props.fetchCommentIfNotFetched &&
      // this.props.fetchCommentIfNotFetched();
    }
  }

  componentDidMount() {
    // TODO 加了HOC后 mount了两次
    this.props.fetchCommentIfNotFetched &&
      this.props.fetchCommentIfNotFetched();
  }
  //

  onPaginationChange = (page) => {
    window.$("html,body").animate({ "scrollTop": 160 })
    this.props.onPaginationChange(page)
  }

  render() {
    const { loadingComments, creator, shixun, myshixun, recommend_shixuns, current_user, watched,
      aboutFocus, user, match
    } = this.props;

    let _user = user;
    if (user) {
      _user = Object.assign({}, user);
      _user.user_url = `/users/${user.login}`
    }
    return (
      <React.Fragment>
        <div className="tpmComment educontent clearfix mt30 mb80">

          <div className="with65 fl edu-back-white commentsDelegateParent" >
            <TPMNav
              match={match}
              user={user}
              shixun={shixun}
              {...this.props}
            ></TPMNav>
            {loadingComments ?
              <Loading /> :
              <Comments
                {...this.props}
                user={_user}
                onPaginationChange={this.onPaginationChange}
              ></Comments>
            }
          </div>

          <div className="with35 fr pl20">
            <TPMRightSection {...this.props}></TPMRightSection>
          </div>
        </div>
      </React.Fragment>

    );
  }
}

export default commentHOC(TPMShixunDiscuss);