content: import React from 'react';
  import { Avatar, Badge, Button, Modal, Input,  Form } from 'antd';
  import './comments.styl';
  import { connect } from 'react-redux';
  import {markdown} from 'markdown';
  import allActions from '@/redux/actions';
  import {commentsPost} from '../../api/comments';
  import CommentContent from '@/components/comment-content/comment-content';
  const Base64 = require('js-base64').Base64;
  class Comments extends React.Component {
  
    state = {
      active: false,
      preview: false,
      userComment: '',
      userName: 'Guest',
      ModalText: 'Name',
      visible: false,
      confirmLoading: false,
      parentId: 0
    };
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
    handleOk = () => {
      console.log(this.refs);
      this.setState({
        userName: this.refs.theInputName.refs.input.value || 'guest',
        confirmLoading: true,
      });
      setTimeout(() => {
        this.setState({
          visible: false,
          confirmLoading: false,
        });
      }, 1000);
    };
    handleCancel = () => {
      console.log('Clicked cancel button');
      this.setState({
        visible: false,
      });
    };
    sortComments = (data) => {
      data.sort((a, b) => {
        return b.voteScore - a.voteScore
      });
    };
  
    _toggleComments = () => {
      let currentState = this.state.active;
      this.refresh();
      setTimeout(() => {
        this.setState({ active: !currentState});
      }, 400);
    };
    // https://juejin.im/post/585b20ef61ff4b006882d9d2
    refresh = () => {
      this.props.queryComments(this.props.articleID, this.sortComments);
    };
  
    loginAction = () => {
      this.showModal();
    };
  
    tabWriting = () => {
      this.setState({
        userComment: this.refs.theTextArea.value,
        preview: false
      });
    };
  
    tabPreview = () => {
      this.refs.preview.innerHTML = markdown.toHTML(this.state.userComment);
      console.log(markdown.toHTML(this.state.userComment))
    };
  
    handleChange = () => {
      this.setState({ userComment: this.refs.theTextArea.value })
    };
  
    commentSubmitHandler = () => {
      if (!this.state.userComment) {
        alert('Please write something');
        return;
      }
      commentsPost({
        'id': Base64.encode(this.state.userComment + new Date().getTime()),
        'timestamp': new Date().getTime(),
        'body': this.state.userComment,
        'author': this.state.userName,
        'parentId': this.props.nekoPosts[0].id
      }).then((data) => {
        console.log(data);
        this.refresh();
      });
    };
  
    render() {
      let cx = require('classnames');
      let commentClass = cx({
        'editor-write-field': true,
        'hide': this.state.preview
      });
  
  
      return (
        <div className="neko-comments">
          <Button type="primary"
                  className="btn-toggle"
                  onClick={this._toggleComments}>
            {this.state.active ? "Hide all the comments" : "Show all the comments"}
          </Button>
          <div className={this.state.active ? "" : "hide"} >
          {
            this.props.nekoComments &&
            this.props.nekoComments.map((comment, index) => {
              return <CommentContent key={index}
                                     refresh={this.refresh}
                                     content={comment} />
            })
          }
          {
            (this.props.nekoComments.length === 0)
              ? <div className={this.state.active ? "comments-empty" : "hide"} >No Comment Yet</div>
              : ''
          }
          </div>
          <div className={this.state.active ? "" : "hide"}>
            <div className="neko-comments-editor-container">
              <a href="#" role="button" className="neko-comments-editor-avatar">
                <Badge>
                  <Avatar shape="square" size="medium" icon="user" />
                </Badge>
              </a>
              <div className="neko-comments-editor-main">
                <div className="neko-comments-editor-header">
                  <nav className="editor-tabs">
                    <button ref="writingTab"
                            onClick={this.tabWriting.bind(this)}
                            className="editor-tab selected">
                      Write
                    </button>
                    <button ref="previewTab"
                            onClick={this.tabPreview.bind(this)}
                            className="editor-tab">
                      Preview
                    </button>
                  </nav>
                </div>
                <div className="neko-comments-editor-body">
                  <div className={commentClass} >
                  <textarea placeholder="Leave a comment"
                            ref="theTextArea"
                            value={this.state.userComment}
                            onChange={this.handleChange.bind(this)}
                  />
                  </div>
                  <div className="editor-preview-field">
                    <div className="editor-preview-markdown" ref="preview">
                      {/*TODO: Markdown Preview*/}
                    </div>
                  </div>
                </div>
              </div>
              <div className="neko-comments-editor-footer">
                <a href="https://github.com/evilstreak/markdown-js"
                   role="button"
                   className="editor-tip"
                   style={{display: "none"}}
                >
                  Markdown is currently not supported.
                </a>
                <a onClick={this.loginAction}
                   role="button"
                   title="Use a different name?"
                   style={{marginLeft: '10px'}}>
                  Login as <span style={{color: 'black'}}>{this.state.userName}</span>.
                </a>
                <Button type="primary"
                        className="submit"
                        onClick={this.commentSubmitHandler}>Comment</Button>
              </div>
            </div>
          </div>
          <Modal title="Use a different name"
                 visible={this.state.visible}
                 okText="Ok"
                 cancelText="Cancel"
                 onOk={this.handleOk}
                 confirmLoading={this.state.confirmLoading}
                 onCancel={this.handleCancel}
          >
            <Form.Item
              label={this.state.ModalText}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 20 }}
            >
              <Input defaultValue={this.state.userName}
                     ref="theInputName"
              />
            </Form.Item>
          </Modal>
        </div>
      );
    }
  }
  function mapStateToProps(state) {
    return state;
  }
  export default connect(mapStateToProps, allActions)(Comments);
  