import { PluginBase } from '../../PluginBase';
import { setWebviewBack } from '../../../../plugins/navbar/set-webview-back';
import { openNewUrlCloseBefore } from '../../../../plugins/web/open-with-close';

export class OpenNewWithCloseDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>打开新窗口,并且关闭当前窗口</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>在新窗口打开H5页面或者NATIVE协议的页面 tcfclient://</div>
    );
  }
  private webviewBack = () => {
    setWebviewBack();
  }
  private openNewUrlClose = () => {
    openNewUrlCloseBefore(this.getHostUrl(`/_ntv_web_open_with_close`));
  }
  private openNewNtvUrlClose = () => {
    openNewUrlCloseBefore('tcfclient://main/homepage');
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.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 className="exec" onClick={this.openNewUrlClose}>打开新窗口关闭当前窗口</button>
            <button className="view" onClick={this.viewCode('open-newurl-close')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewNtvUrlClose}>打开Ntv新窗口关闭当前窗口</button>
            <button className="view" onClick={this.viewCode('open-newurl-close')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button onClick={this.webviewBack}>返回上一级</button>
          </div>
        </div>
      </div>
    );
  }
}