// @require '../../style/reset.scss'
// @require './demo.scss'

import React from 'react';
import ReactDom from 'react-dom';
import { Demo, DemoPanel } from '../../../external/demo/index';
import RcUpload from 'rc-upload';
import Upload from '../index';
import Button from '../../button/index';
import Validator from '../../validator/index';
import '../style/v2.scss';
// import Doc from './doc.md';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      demo1HasImg: 0,
      demo1Src: '',
      status: '还没动',
    };

    this.beforeUpload = this.beforeUpload.bind(this);
    this.onChange = this.onChange.bind(this);
    this.changeStatus = this.changeStatus.bind(this);
  }

  beforeUpload() {
    this.changeStatus('beforeUpload');
    // return false;
  }

  onChange(file) {
    console.log('onChange', file);
    this.changeStatus(file.status);
  }

  changeStatus(s) {
    let { status } = this.state;
    status = status.split('>');
    status.push(s);
    this.setState({
      status: status.join('>'),
    });
  }

  render() {
    const state = this.state;

    return (
      <Demo name="Upload">
        <DemoPanel title="普通上传">
          <p className="description">
            <a target="_blank" href="https://github.com/react-component/upload">upload</a> 的普通用法
          </p>
          <RcUpload
            action="/cgi/upload"
            onSuccess={(response, file) => {
              this.setState({
                demo1HasImg: 1,
                demo1Src: response.path,
              });
              console.log(file);
            }}
          >
            <Button>上传</Button>
          </RcUpload>
          {state.demo1HasImg ? <img alt="demo1" width="100" src={state.demo1Src} /> : null}
        </DemoPanel>

        <DemoPanel title="内置基础样式">
          <Upload
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: '内置基础样式',
                src: response.path,
              };
            }}
          />
        </DemoPanel>

        <DemoPanel title="描述信息">
          <Upload
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: '描述信息',
                src: response.path,
              };
            }}
            desc={
              <div>
                <p>
                  图片要求
                  <a
                    href="http://ke.qq.com/docs/cover-description.jpg"
                    className="nor-link" target="_blank"
                  >点击查看课程封面模版规范</a>
                </p>
                <p>尺寸大于 1080*608 分辨率小于 96dpi</p>
                <p>大小小于 2M</p>
                <p>支持 JPG/PNG/BMP 等格式图片</p>
              </div>
            }
          />
        </DemoPanel>

        <DemoPanel title="禁用">
          <Upload
            disabled
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: '禁用',
                src: response.path,
              };
            }}
            desc={
              <div>
                <p>
                  图片要求
                  <a
                    href="http://ke.qq.com/docs/cover-description.jpg"
                    className="nor-link" target="_blank"
                  >点击查看课程封面模版规范</a>
                </p>
                <p>尺寸大于 1080*608 分辨率小于 96dpi</p>
                <p>大小小于 2M</p>
                <p>支持 JPG/PNG/BMP 等格式图片</p>
              </div>
            }
          />
        </DemoPanel>

        <DemoPanel title="onChange & beforeUpload 事件">
          <p>状态： {this.state.status}</p><br />
          <Upload
            action="/cgi/upload"
            getImgInfo={response => {
              return {
                name: 'onChange 事件',
                src: response.path,
              };
            }}
            beforeUpload={this.beforeUpload}
            onChange={this.onChange}
          />
        </DemoPanel>
        <DemoPanel title="默认图片">
          <Upload
            action="/cgi/upload"
            src="//8.url.cn/edu/edu_modules/edu-ui/img/bg/logo192-3x.e89120ba.png#unsprite"
            getImgInfo={response => {
              return {
                name: '默认图片',
                src: response.path,
              };
            }}
          />
        </DemoPanel>
        <DemoPanel title="校验">
          <Validator
            ref={(instance) => this.uploadValidator = instance}
          >
            <Upload
              name="upload"
              action="/cgi/upload"
              getImgInfo={response => {
                return {
                  name: '默认图片',
                  src: response.path,
                };
              }}
              data-required
              data-required-msg="上传图片不能为空"
              data-patterns={[]}
              onChange={() => this.uploadValidator.checkField(undefined, 'upload')}
              msgAlign="right"
            />
          </Validator>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');

// 会被首页调用，判断下有无节点
if (demo) {
  ReactDom.render(<App />, demo);
}