import React, { Component } from "react";
import ReactDOM from "react-dom";
// e.g.
// import { Button, Icon } from "antd";
// import App, { Editor, RenderText } from "./App";
import App, { Editor } from "./App";
import registerServiceWorker from "./registerServiceWorker";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      value: ""
    };
    this.onPageChange = this.onPageChange.bind(this);
    this.handleChangeValue = this.handleChangeValue.bind(this);
    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
  }

  onPageChange(page) {
    this.setState({
      page
    });
  }

  handleChangeValue(value) {
    this.setState({ value });
    console.log("handleChangeValue value: ", value);
  }

  handleChangeSubmit({ text, files }) {
    this.setState({ loading: true }, () => {
      setTimeout(() => {
        this.setState({ loading: false });
      }, 2000);
    });
    console.log("submit text: ", text);
    console.log("submit files: ", files);
  }

  render() {
    // 最简单的用法
    return (
      <App
        type={1}
        businessId="test"
        showAlertComment
        showAlertReply
        showAlertFavor
        showError={false}
        userId={71299}
        page={this.state.page}
        onPageChange={this.onPageChange}
        pageType="more"
        businessUserId={4}
        onError={(msg, { response }) => {
          if (response.status === 401) {
            console.log("unlogined");
          }
          console.log(`-----------${msg}`);
        }}
      >
        <Editor
          maxUpload={9}
          autoFocus
          beforeSubmit={() => {
            return new Promise(resolve => {
              resolve(true);
            });
          }}
          onCommentSuccess={() => {
            console.log("succ");
          }}
          showError={false}
          onError={(msg, { response }) => {
            if (response.status === 401) {
              console.log("unlogined");
            }
            console.log(`-----------${msg}`);
          }}
        />
      </App>
    );

    // e.g.
    // 复杂的用户法
    // const props = {
    //   type: 1,
    //   businessId: "1",
    //   API: "http://api.links123.net/comment/v1",
    //   showList: true
    // };

    // const editorProps = {
    //   showEmoji: true,
    //   placeholder: "说点什么吧",
    //   rows: 5,
    //   btnLoading: this.state.loading,
    //   btnDisable: this.state.loading,
    //   btnSubmitText: "提交",
    //   value: this.state.value,
    //   onChange: v => this.handleChangeValue(v),
    //   onSubmit: v => this.handleChangeSubmit(v),
    //   button: (
    //     <Button
    //       type="primary"
    //       ghost
    //       // onClick={() => console.log('click btn: ', this.state.value)}
    //     >
    //       自定义按钮
    //     </Button>
    //   ),
    //   emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
    //   imageToolIcon: (
    //     <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
    //   )
    // };

    // return (
    //   <App {...props}>
    //     <Editor {...editorProps} />
    //   </App>
    // );
  }
}

ReactDOM.render(<Index />, document.getElementById("root-comment"));
registerServiceWorker();