import React, { Component } from "react";
import PropTypes from "prop-types";
import Comment from "../../Comment";

class CommentInput extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(value) {
    console.log("handleSubmit comment input value: ", value);
    const { action, commentId, replyId, callback } = this.props;
    if (action === "comment") {
      this.props.app.sCreateComment({
        content: value
      });
    } else if (action === "reply") {
      this.props.app.sCreateReply(
        {
          comment_id: commentId,
          content: value
        },
        () => callback && callback()
      );
    } else if (action === "replyToReply") {
      this.props.app.sCreateReply(
        {
          comment_id: commentId,
          content: value,
          reply_id: replyId
        },
        () => callback && callback()
      );
    }
  }

  render() {
    const childrenWithProps = React.Children.map(this.props.content, child => {
      return React.cloneElement(child, {
        // 默认使用 CommentInput 的 onSubmit 来提交评论
        // 但也可以使用 Editor 的 props 来覆盖 onSubmit
        onSubmit: this.handleSubmit,
        ...child.props
      });
    });

    return (
      <div>
        {/* {type === "normal" ? (
          <div>
            <span
              style={{
                border: "1px solid #CECECE",
                color: "#666",
                padding: "2px 3px",
              }}
            >
              回复
            </span>
            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
              口碑
              <span style={{ marginLeft: "20px", color: "#666666" }}>
                (全站挑出毛病或提出合理建议，奖励10到100元红包)
              </span>
            </span>
          </div>
        ) : null} */}
        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
      </div>
    );
  }
}

CommentInput.propTypes = {
  // comment 评论
  // reply 评论的回复
  // replyToReply 回复的回复
  action: PropTypes.oneOf(["comment", "reply", "replyToReply"])
};

CommentInput.defaultProps = {
  action: "comment"
};

export default Comment(CommentInput);