import React from "react";
import { Modal, Icon } from "antd";
import intl from "react-intl-universal";
import CommentInput from "../CommentInput";
import Editor from "../Editor";
import { IMAGE_SPLIT } from "../../constant";
import "./EditComment.css";
import Comment from "../../Comment";
class EditComment extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      value: this.getInitValue(props).value,
      fileList: this.getInitValue(props).fileList
    };
  }

  handleSubmit({ text = "", files = [] }) {
    const { fileList } = this.state;
    const { app, action, commentId, replyId, replyPage } = this.props;
    let value = text;
    app.onBeforeUpdateComment();
    if (fileList && fileList.length) {
      value += IMAGE_SPLIT;
      fileList.forEach(file => {
        value += `${file.thumbUrl},`;
      });
    }
    if (value.substr(-1) === ",") {
      value = value.slice(0, -1);
    }
    if (action === "comment") {
      app.sUpdateComment({ commentId, content: value });
    } else {
      app.sUpdateReply({ commentId, content: value, replyId, replyPage });
    }
    this.props.handleClose();
  }

  getInitValue(props) {
    const { content } = props;
    let newContent = content.content;
    let images = "";
    if (newContent.indexOf(IMAGE_SPLIT) !== -1) {
      newContent = newContent.split(IMAGE_SPLIT);
      images = newContent.pop();
      newContent = newContent.join("");
    }
    let fileList = [];
    if (images !== "") {
      fileList = images.split(",");
      fileList = fileList.map((item, index) => {
        return {
          thumbUrl: item,
          uid: index
        };
      });
    }
    const value = this.renderTextWithReply(newContent, content);
    return { value, fileList };
  }

  getEmojiToolIcon() {
    return (
      <div className="expression-btn-wrap">
        <Icon type="smile" className="icon" />
        <span className="icon-tool-text">{intl.get("bilingually.emoji")}</span>
      </div>
    );
  }

  getImageToolIcon() {
    return (
      <div className="picture-btn-wrap">
        <Icon type="picture" className="icon" />
        <span className="icon-tool-text">{intl.get("bilingually.pic")}</span>
      </div>
    );
  }

  renderTextWithReply(text, content) {
    let newText = text;
    // const { reply } = content;
    // if (reply) {
    //   newText = `${newText} //@${reply.user_name} ${reply.content}`;
    //   if (reply.reply) {
    //     return this.renderTextWithReply(newText, reply);
    //   }
    // }
    return newText;
  }

  render() {
    return (
      <Modal
        visible={true}
        footer={null}
        wrapClassName="editCommetModal"
        onCancel={this.props.handleClose}
      >
        <div className="title">{intl.get("comment.edit")}</div>
        <CommentInput
          content={
            <Editor
              maxUpload={9}
              autoFocus
              // {...this.props.editorProps}
              action={this.props.action}
              replyId={this.props.replyId}
              commentId={this.props.commentId}
              userId={this.props.content.user_id}
              fileList={this.state.fileList}
              value={
                this.props.preRenderValue &&
                this.props.preRenderValue(this.state.value)
              }
              onChange={value => {
                this.setState({
                  value
                });
              }}
              handleChangeFileList={fileList => {
                this.setState({
                  fileList
                });
              }}
              onSubmit={this.handleSubmit}
              emojiToolIcon={this.getEmojiToolIcon()}
              imageToolIcon={this.getImageToolIcon()}
              emojiPopoverPlacement="bottom"
              uploadPopoverPlacement="bottom"
              btnSubmitText={intl.get("comment.update")}
            />
          }
        />
      </Modal>
    );
  }
}

export default Comment(EditComment);