import { Component } from 'react';
import Spinner from '../components/Spinner/Spinner';
import UploadUnit from '../components/UploadUnit/UploadUnit';
import { post } from '../helper/axios';
import { apis } from '../helper/apis';
import { alert } from '../helper/alert';
import { images } from '../resources.json';

import './upload.css';

export class UploadContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null,
      msg: "",
      url: "",
      submitting: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleUploadError = this.handleUploadError.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const { files } = e.target;
    if (files.length > 0)
      this.setState({ file: files[0] });
  }

  handleUploadError(msg) {
    this.setState({ submitting: false });
  }

  handleSubmit() {
    if ((this.state.msg === "" && this.file === null) || this.state.submitting) return;
    this.setState({ submitting: true });
  }

  componentDidUpdate() {
    if (this.state.submitting && (!this.state.file || this.state.url !== "")) {
      // upload using axios
      post(apis.submitMessage, { content: this.state.msg, image: this.state.url })
        .then(({ data, status, networkStatus }) => {
          if (networkStatus !== 200) return;
          if (!status) return alert('提交内容失败：' + data);
          this.setState({ submitting: false, msg: "", url: "", file: null });
          alert('内容提交成功啦').then(({ isConfirmed }) => {
            if (isConfirmed) window.close();
          });
        });
    }
  }

  render() {
    return (
      <div className="upload-container">
        <div className="banner">
          <div className="sdu">
            <img src={images.icon} className="sdu-logo" alt="logo" />
            <img src={images.name} className="sdu-name" alt="" />
          </div>
          <div className="user">
            <img src="" className="user-avatar" alt="avatar" />
            <div className="user-name"></div>
          </div>
        </div>
        <div className="content">
          <div className="message-box">
            <textarea
              className="message-box-textarea"
              placeholder="你的留言…"
              value={this.state.msg}
              onChange={e => this.setState({ msg: e.target.value })}
              disabled={this.state.submitting}
            />
          </div>
          <div className="upload-box">
            {this.state.file ? (
              <UploadUnit
                file={this.state.file}
                onUpload={url => this.setState({ url })}
                onUploadError={this.handleUploadError}
                onCancel={() => this.setState({ file: null, url: "" })}
                upload={this.state.submitting}
              />
            ) : (
              <div className="upload-image-btn">
                <input type="file" accept="image/*" multiple={false} onChange={this.handleChange} />
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 54"><path d="M60.342,102.091l5.331-8a2.249,2.249,0,0,1,1.872-1h18a2.246,2.246,0,0,1,1.872,1l5.332,8h7.094a6.72,6.72,0,0,1,6.7,6.7v31.6a6.722,6.722,0,0,1-6.7,6.7h-46.6a6.722,6.722,0,0,1-6.7-6.7v-31.6a6.72,6.72,0,0,1,6.7-6.7h7.094Zm5.407,0H87.341l-3-4.5H68.751l-3,4.5Zm10.8,35.25a12.75,12.75,0,1,0-12.75-12.75A12.764,12.764,0,0,0,76.545,137.341Zm0-21a8.25,8.25,0,1,1-8.25,8.25A8.261,8.261,0,0,1,76.545,116.341Z" transform="translate(-46.546 -93.091)" fill="#8A8A8A"/></svg>
                <div className="upload-image-btn-text">添加图片</div>
              </div>
            )}
          </div>
          <button
            className="btn btn-sdu btn-straight btn-upload"
            onClick={this.handleSubmit}
            disabled={(this.state.msg === "" && this.state.file === null) || this.state.submitting}
          >{this.state.submitting ? (<Spinner />) : '提交'}</button>
        </div>
      </div>
    );
  }
}