// https://github.com/lovasoa/react-contenteditable/blob/master/src/react-contenteditable.js
import React from "react";
import { Icon, Button, Popover, Input } from "antd";
import { MAX_UPLOAD_NUMBER } from "../../constant";
import Upload from "./Upload";
import Emoji from "./Emoji";
// import styles from "./index.less";
import "./index.css";

const { TextArea } = Input;

export default class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showUpload: false
    };
    this.handleClickEmoji = this.handleClickEmoji.bind(this);
    this.handleShowUpload = this.handleShowUpload.bind(this);
  }

  componentDidMount() {}

  handleClickEmoji(emojiId) {
    this.props.onChangeEmoji(emojiId);
  }

  handleShowUpload(showUpload) {
    if (typeof showUpload === "boolean") {
      this.setState({ showUpload: showUpload });
    } else {
      this.setState({ showUpload: !this.state.showUpload });
    }
  }

  render() {
    const {
      value,
      onChange,
      placeholder,
      fileList,
      onChangeFileList,
      onUpload
    } = this.props;
    return (
      <div className="editor">
        <TextArea
          value={value}
          onChange={onChange}
          rows={5}
          placeholder={placeholder}
        />

        <div className="toolbar">
          <div style={{ float: "left", margin: "8px 11px" }}>
            <Popover
              trigger="click"
              placement="bottomLeft"
              autoAdjustOverflow={false}
              content={
                <div style={{ width: 200 }}>
                  <Emoji onClick={this.handleClickEmoji} />
                </div>
              }
              overlayClassName="feed"
            >
              <Icon type="smile-o" className="icon" />
            </Popover>

            <Popover
              visible={this.state.showUpload}
              overlayStyle={{ zIndex: 999 }}
              content={
                <div style={{ width: 112 * MAX_UPLOAD_NUMBER, minHeight: 100 }}>
                  <Upload
                    onChangeFileList={onChangeFileList}
                    onUpload={onUpload}
                    fileList={fileList}
                  />
                </div>
              }
              placement="bottomLeft"
              title={
                <div style={{ margin: "5px auto" }}>
                  <span>
                    上传图片
                    <span style={{ color: "#666", fontWeight: 400 }}>
                      (您还能上传{MAX_UPLOAD_NUMBER - fileList.length}张图片)
                    </span>
                  </span>
                  <Icon
                    type="close"
                    onClick={() => this.handleShowUpload(false)}
                    style={{
                      float: "right",
                      cursor: "pointer",
                      marginTop: 4
                    }}
                  />
                </div>
              }
            >
              <Icon
                type="picture"
                className="icon"
                style={{ marginLeft: 10 }}
                onClick={() => this.handleShowUpload(true)}
              />
            </Popover>
          </div>

          <div style={{ float: "right", margin: "5px 11px" }}>
            <Button
              onClick={this.props.onSubmit}
              type="primary"
              loading={this.props.loading}
            >
              发表
            </Button>
          </div>
        </div>
      </div>
    );
  }
}