import React, { Component } from 'react';
import SmartGesture from 'react-smart-gesture';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result1: {},
      result2: {},
      storedPoints: null,
    };
  }

  componentDidMount() {
    this.refs.gConfirm.addEventListener('click', () => {
      this.refs.g2.addGesture({
        name: this.refs.gName.value,
        points: this.state.storedPoints,
      });
      this.refs.gName.value = '';
    });
    this.refs.gRemove.addEventListener('click', () => {
      this.refs.g1.destroy();
    });
  }

  _onGesture1(res) {
    this.setState({
      result1: res,
    });
  }

  _onGesture2(res, points) {
    this.setState({
      result2: res,
      storedPoints: points,
    });
  }

  render() {
    const options1 = {
      onGesture: this._onGesture1.bind(this),
    };
    const options2 = {
      lineColor: 'red',
      lineWidth: '1',
      onGesture: this._onGesture2.bind(this),
    };

    return (
      <div className="demo">
        <h1>react-smart-gesture</h1>
        <p>
          smart-gesture for React. 一个 web 版的鼠标手势组件。
        </p>
        <p>
          ( 注意请先停用浏览器的手势插件, 默认使用右键操作 )
        </p>
        <hr/>
        <h5>
          example1: 在已有组件上添加手势操作
        </h5>
        <hr/>
        <p><b>名称:</b> {this.state.result1.name || '未识别'} <b>分数:</b> {this.state.result1.score || 0}</p>

        <SmartGesture ref="g1" options={options1}>
          <div style={{border: '1px solid gray'}}>
            <p>在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。</p>
            <p>在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。</p>
            <p>在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。</p>
            <p>在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。在已有的组件上添加手势。</p>
          </div>
        </SmartGesture>
        <p>
          <button ref="gRemove">remove gesture</button>
        </p>
        <hr/>
        <p>
          example2: 独立的手势组件
        </p>
        <hr/>
        <p><b>名称:</b> {this.state.result2.name || '未识别'} <b>分数:</b> {this.state.result2.score || 0}</p>

        <SmartGesture ref="g2" style={{width:300,height: 200}} options={options2} />
        <br/>
        <p>
          将刚才的手势命名为: <input type="text" ref="gName"/> <button ref="gConfirm">确定</button> ( tip: 为手势录入多个样例，可以提高识别率 )
        </p>

      </div>
    );
  }
}

export default App;