import * as React from 'react';
import { Props, State } from './type';
import * as Styled from './index.style';
import {jsonp} from '../utils/request';
// import {getLogInstance} from 'snail-log';
import { handlePathQuery} from '../utils/snailTargetHandler';
import {showMessage} from '../common/toast/toast';
import {formatAvatar} from '../utils/format';

const isOnline = location.host === 'du.163.com';

export class SnailQuestion extends React.Component<Props, State> {
  static defaultProps = new Props();
  state = new State();
  // static getDerivedStateFromProps(nextProps, prevState) {
  //   console.log('getDerivedStateFromProps', nextProps);
  //   const {discount, type, books} = nextProps;
  //   if(!isOnline){
  //     console.log('Set fake data');
  //     return {
  //       question: {
  //         question: ''
  //       },
  //       finalCostCoins: 500
  //     }
  //   }
  //   return null;
  // }
  componentDidUpdate(){
    // console.log('did update');
    if(this.props.questionId && (!this.state.question || (this.state.question.questionId.toString() !== this.props.questionId))){
      this.getData();
    }
  }
  componentDidMount(){
    if(!this.state.question && this.props.questionId){
      this.getData();
    }
  }
  async getData(){
    const {questionId} = this.props;
    const [question, {user, answer}] = await Promise.all([this.getQuestion(questionId), this.getAnswer(questionId)])
    this.setState({
      question,
      user,
      answer
    })
  }
  async getQuestion(questionId: string){
    try {
      const response = await jsonp('https://p.du.163.com/question/detail.jsonp', {
        questionId,
      })
      if(response.code === 0){
        return response.questionWrapper.question
      }else{
        showMessage(response.msg);
      }
    } catch (error) {
      console.log('Get question detail failed:', error);
    }
  }
  async getAnswer(questionId: string){
    try {
      const response = await jsonp('https://p.du.163.com/answer/list.jsonp', {
        questionId,
        sortType: 'hot',
        childType: 1,
        pageSize: 1
      })
      if(response.code === 0){
        if(response.answerWrappers && response.answerWrappers.length){
          return {
            user: response.answerWrappers[0].userWrapper,
            answer: response.answerWrappers[0].answer
          }
        }else{
          return {
            user: null,
            answer: null
          }
        }
      }else{
        showMessage(response.msg);
      }
    } catch (error) {
      console.log('Get answer failed:', error);
    }
  }
  clickHandler(){
    const {isEdit, questionId, pos} = this.props;
    handlePathQuery({
      path: 'question',
      query: {
        questionId
      },
      logPointId: 'acttemplate1-17',
      logQuery: {
        category: 'acttemplate',
        questionId,
        pos
      },
      isEdit
    })
  }
  render() {
    // console.log('render', this.props, this.state);
    const {style, questionId, title, isEdit} = this.props;
    const {question, user, answer} = this.state;
    // console.log('singleBook', singleBook);
    // console.log('firstBook', firstBook, 'restBook', restBook);
    return (
      <Styled.Container style={style} onTouchStart={() => {}} onClick={this.clickHandler.bind(this)}>
        {title && <Styled.Title>{title}</Styled.Title>}
        {question && <Styled.Question>{question.question}</Styled.Question>}
        {
          user && question && 
          <Styled.Info>
            <img className="avatar" src={formatAvatar(user.user.imageUrl)} alt="头像"/>
            <div className="count">共{question.answerCount}人参与</div>
            <div className="name">{user.user.nickName}</div>
          </Styled.Info>
        }
        {answer && <Styled.Answer>{answer.summary}</Styled.Answer>}
        {answer === null && <Styled.Answer>暂无回答</Styled.Answer>}
        {
          !questionId && isEdit && <div>蜗牛问答模块</div>
        }
        {question && <Styled.Divider />}
      </Styled.Container>
    )
  }
}