import React, { Component } from "react";
import { Pagination } from "antd";

import axios from 'axios'
import MemoDetailMDEditor from '../../../forums/MemoDetailMDEditor'

import '../../../forums/Post.css'
import '../../../forums/RightSection.css'
import { ImageLayerOfCommentHOC } from '../../../page/layers/ImageLayerOfCommentHOC'

import Comments from '../../../comment/Comments'
import '../../common/courseMessage.css'
import {
  generateComments, generateChildComments, _findById, handleContentBeforeCreateNew, addNewComment
  , addSecondLevelComment, NEED_TO_WRITE_CONTENT, handleContentBeforeCreateSecondLevelComment
  , handleDeleteComment, handleCommentPraise, handleHiddenComment
} from '../../common/CommentsHelper'
const REPLY_PAGE_COUNT = 10

/*
  相比较GraduateTopicReply 改动的地方
  列表接口名 /graduation_tasks/${graduation_topic_id}/show_comment.json?parent_id=${parent.id}&limit=500
  回复类型名 jour_type: this.props.jour_type,
*/
class CommonReply extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageCount: 1
    }
  }

  componentDidMount() {
    this.fetchReplies()


  }
  _getUser() {
    const { current_user } = this.props;
    current_user.user_url = `/${current_user.login}`;
    return current_user;
  }
  _findById = _findById
  createNewComment = (commentContent, id, editor) => {
    const graduation_topic_id = this.props.memo.id

    let content = handleContentBeforeCreateNew(commentContent);
    const { memo } = this.props;
    const url = `/users/reply_message.json`;

    axios.post(url, {
      journals_for_message: {
        jour_type: this.props.jour_type,
        jour_id: graduation_topic_id,
        notes: content,
        // m_parent_id
        reply_id: memo.user_id || this.state.homework_user_id
      }
    }
    ).then((response) => {
      if (response.data.status === -1) {
        console.error('服务端异常')
        return;
      }
      // this.props.showNotification('帖子发表成功')

      if (response.data && response.data.id) {
        const _id = response.data.id;
        // md
        editor.setValue && editor.setValue('')
        this.refs.editor.close && this.refs.editor.close()

        const user = this._getUser();
        const isSuperAdmin = this.props.isSuperAdmin()

        this.setState({
          comments: addNewComment(this.state.comments, _id, content, user, isSuperAdmin, this),
          total_count: this.state.total_count + 1
        })
        this.refs.editor.showEditor();

      }
    }).catch((error) => {
      console.log(error)
    })
  }
  replyComment = (commentContent, id, editor) => {
    if (this.props.memo.id === id) { // 回复帖子
      this.createNewComment(commentContent, id, editor);
      return;
    }
    const url = `/users/reply_message.json`;

    const { comments } = this.state;
    const user = this._getUser();
    const graduation_topic_id = this.props.memo.id
    const commentIndex = this._findById(id, comments);
    let comment = comments[commentIndex];

    commentContent = handleContentBeforeCreateSecondLevelComment(commentContent)
    axios.post(url, {
      journals_for_message: {
        // 'GraduationTask'
        jour_type: this.props.jour_type,
        jour_id: graduation_topic_id,
        notes: commentContent,
        m_parent_id: id,
        reply_id: comment.user_id
      }
    },
      {
      }
    ).then((response) => {
      if (response.data.id) {
        let newId = response.data.id;

        const newMemo2 = Object.assign({}, this.props.memo);
        newMemo2.total_count = newMemo2.total_count + 1;

        this.setState({
          comments: addSecondLevelComment(comments, comment, commentIndex, newId, commentContent, user, editor),
          memo: newMemo2,
          total_count: this.state.total_count + 1

        })
      }

    }).catch((error) => {
      console.log(error)
    })
  }

  loadMoreChildComments = (parent) => {
    const graduation_topic_id = this.props.memo.id
    const course_id = this.props.course_id
    const url = `/${this.props.apiRouteName}/${graduation_topic_id}/show_comment.json?parent_id=${parent.id}&limit=500`
    axios.get(url, {
    })
      .then((response) => {
        const { comments } = response.data


        // const memo = Object.assign({}, this.state.memo)
        // memo.sum_replies_count = sum_replies_count;
        this.setState({
          // memo,
          comments: generateChildComments(comments, this.state.comments, parent, this.transformReply)
        })
      }).catch((error) => {
        console.log(error)
      })
  }

  onPaginationChange = (pageCount) => {
    this.setState({ pageCount }, () => {
      this.fetchReplies()
    })
  }

  fetchReplies = () => {
    const graduation_topic_id = this.props.memo.id
    const course_id = this.props.course_id
    const url = `/${this.props.apiRouteName}/${graduation_topic_id}/show_comment.json?page=${this.state.pageCount}`
    // page limit parent_id
    axios.get(url, {
    })
      .then((response) => {
        const { comments, messages_count, homework_user_id, parent_messages_count } = response.data

        this.setState({
          comments: generateComments(comments, this.transformReply),
          // : this.state.comments.concat(comments),
          total_count: parent_messages_count,
          homework_user_id
        })
      }).catch((error) => {
        console.log(error)
      })
  }

  transformReply = (reply, children = []) => {
    const isAdmin = this.props.isAdmin()
    const isSuperAdmin = this.props.isSuperAdmin()
    return {
      admin: isAdmin, //
      isSuperAdmin: isSuperAdmin,
      permission: true, //
      children: children,
      hidden: reply.hidden,
      id: reply.id,
      image_url: reply.author.image_url,
      reward: null, //
      time: reply.time, // moment(reply.created_on).fromNow(),
      user_id: reply.author.id,
      user_login: reply.author.login,
      user_praise: reply.user_praise,
      username: reply.author.name,
      content: reply.content,
      praise_count: reply.praise_count,
      child_message_count: reply.child_message_count
    }
  }

  // 公共接口 --- 删除回复
  deleteComment = (parrentComment, childCommentId) => {
    handleDeleteComment(this, parrentComment, childCommentId, 'journals_for_message')
  }
  // 公共接口 --- 回复点赞
  commentPraise = (discussId) => {
    handleCommentPraise(this, discussId, 'journals_for_message')
  }
  // 公共接口 --- 隐藏回复
  hiddenComment = (item, childCommentId) => {
    handleHiddenComment(this, item, childCommentId, 'journals_for_message')
  }

  showCommentInput = () => {
    this.refs.editor.showEditor();
  }
  initReply = (parent) => {
    if (!parent.isAllChildrenLoaded) {
      this.loadMoreChildComments(parent)
    }
  }

  render() {
    let { total_count, comments, pageCount } = this.state
    const { current_user, memo } = this.props

    return (
      <div style={{ background: 'rgb(255, 255, 255)', marginTop: '20px' }} className="course-message">
        <style>{`
          .course-message .commentInput {
            padding-bottom: 56px !important;
          }
          .course-message .commentInput.mockInputWrapper {
            padding-bottom: 20px !important;
          } 
          .course-message .memoReplies {
            /* border-top: 1px solid #EDEDED;  */
            padding-bottom: 30px;
          }
        `}</style>
        <MemoDetailMDEditor ref="editor" memo={memo} usingMockInput={true} placeholder="说点什么"
          height={160} showError={true} imageExpand={true}
          replyComment={this.replyComment}
          {...this.props}
          commentsLength={comments ? comments.length : 0}
        ></MemoDetailMDEditor>
        {/* bor-bottom-greyE */}
        <div className="padding40  memoReplies commentsDelegateParent"
          style={{ display: (comments && !!comments.length) ? 'block' : 'none' }}>
          <div className="replies_count">
            <span className="labal">全部回复</span>
            <span className="count">{total_count}</span>
          </div>

          <Comments comments={comments} user={current_user}
            replyComment={this.replyComment}
            deleteComment={this.deleteComment}
            commentPraise={this.commentPraise}
            rewardCode={this.rewardCode}
            hiddenComment={this.hiddenComment}

            usingAntdModal={true}
            isChildCommentPagination={true}
            loadMoreChildComments={this.loadMoreChildComments}
            initReply={this.initReply}
            showRewardButton={false}
            onlySuperAdminCouldHide={true}
          ></Comments>
        </div>

        {total_count > REPLY_PAGE_COUNT &&
          <div className="memoMore">
            <Pagination showQuickJumper onChange={this.onPaginationChange} current={pageCount} total={total_count} pageSize={10} />
            <div className="writeCommentBtn" onClick={this.showCommentInput}>写评论</div>
          </div>}
      </div>
    )
  }
}
export default ImageLayerOfCommentHOC()(CommonReply);