import { PluginBase } from '../../PluginBase';
import { setClipboard, getClipboard } from '../../../../plugins';

export class ClipboardDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>设置剪切板内容</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>设置剪切板内容</div>
      </div>
    );
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  private setClipboardText = () => {
    // 设置剪贴板内容
    setClipboard({
      text: 'setClipboard' + Math.random(),
    });
  }
  private getClipboardText = () => {
    // 获取剪贴板内容
    // 设置剪贴板内容
    getClipboard().then(result => {
      alert(JSON.stringify(result));
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }
  public render() {
    return (
      <div className="plugin-page">
        <h2 className="left">{this.props.pluginName}</h2>
        <div className="short-desc">{this.getPluginShortDesc()}</div>
        <div className="full-desc">{this.getPluginFullDesc()}</div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.setClipboardText}>设置剪贴板</button>
            <button className="view" onClick={this.viewCode('clipboard')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getClipboardText}>获取剪贴板内容</button>
            <button className="view" onClick={this.viewCode('clipboard')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}