import React, { useState } from "react";
import { getUrl } from "educoder";
import { Button, message } from "antd";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import axios from "axios";
function new_comment({ memo_id, user_image, click_button, new_reply }) {
  const [journal_spin, setJournalSpin] = useState(false);
  const [content, setContent] = useState("");
  
  function change_input(value) {
    setContent(value);
  }

  function add_reply() {
    setJournalSpin(true);
    let url = `/memos/${memo_id}/reply.json`;
    axios
      .post(url, {parent_id: memo_id, content: content})
      .then((result) => {
        if (result) {
          if (result.data.status === 0) {
            new_reply(result.data.reply)
          } else {
            message.error(result.data.message);
          }
        }
        setJournalSpin(false);
      })
      .catch((e) => {
        setJournalSpin(false);
        message.error(e);
      });
  }
  function click_reply_cancel() {
    click_button(false);
  }

  return (
    <div className="grid-item-top pt20">
      <img src={getUrl(user_image)} className="user-image mr10"></img>
      <div>
        <MDEditor
          placeholder={"添加评论..."}
          height={200}
          mdID={
            memo_id
              ? "orderdetail-add-descriptions" + memo_id
              : "orderdetail-add-descriptions"
          }
          onChange={change_input}
        ></MDEditor>
        <p className="clearfix mt20">
          <Button
            type="success"
            onClick={add_reply}
            loading={journal_spin}
            className="mr15"
          >
            评论
          </Button>
          <Button onClick={click_reply_cancel}>取消</Button>
        </p>
      </div>
    </div>
  );
}
export default new_comment;
