import { setWebviewBack } from '../../../../plugins/navbar';
import { PluginBase } from '../../PluginBase';
import { openNewUrl } from '../../../../plugins/web';

export class SetWebviewBack extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>webview返回功能。</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>如果webview有历史页面，会返回上一页面，如果无历史页面，则关闭webview。</div>
    );
  }
  private setWebviewBack = () => {
    setWebviewBack();
  }

  private setWebviewBackTwo = () => {
    setWebviewBack(2);
  }

  private setWebviewBackThree = () => {
    setWebviewBack(3);
  }

  private setWebviewBack2Home = () => {
    setWebviewBack(100);
  }

  private openNewUrl = () => {
    openNewUrl(window.location.href);
  }

  private viewCode = () => {
    this.showMarkdownPopup(require('./webview-back.md'));
  }
  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 onClick={this.openNewUrl}>打开新窗口</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewBack}>返回上一级</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewBackTwo}>返回上两级</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewBackThree}>返回上三级</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewBack2Home}>返回首页</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}