import { PluginBase } from '../PluginBase';
import { setWebviewBack } from '../../../plugins';

export class NtvLaunchMainWebDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>url协议尝试打开app并自动跳转到指定页面</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div className="text-area">
          Demo:<br />fcfclient://web/main?url=https%3A%2F%2Fdomain%2Fwebapps%2Floan%2Fonline%2Fmine%2Findex&amp;wakeUid=e571f9a1d03447b494737fee6592d0ac&amp;wakeLoginKey=
       </div>
        <div>
          默认开启打开新窗口的能力
       </div>
        <div>
          1. native页面，不传递ntv_login之类的参数，如果需要登录由本来ntv页面自行控制好了<br />
          fcfclient://main/web?url=encodeURIComponent("fcfclient://main/qrcode")
        </div>
        <div>
          2. bridge页面，不传递ntv_login之类的参数，如果需要登录由bridge内forceLogin,tryLogin来控制<br />
          fcfclient://main/web?url=encodeURIComponent("https://domain/webapps/home/index")
        </div>
        <br />
        <div>
          3. 启动打开H5页面，并加载Bridge能力，支持H5url参数协议比如ntv_login等<br />
          fcfclient://main/web?url=encodeURIComponent("http.baidu.com?ntv_login")
        </div>
      </div>
    );
  }

  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  private openNtvPage = () => {
    window.location.href = `https://domain/mkt-web/guide/cc?url=` + encodeURIComponent('fcfclient://main/qrcode');
  }

  private openNtvPageH5 = () => {
    window.location.href = `https://domain/mkt-web/guide/cc?url=` + encodeURIComponent('https://www.baidu.com?ntv_webview_history');
  }

  private openNtvPageBridgeH5 = () => {
    window.location.href = `https://domain/mkt-web/guide/cc?url=` + encodeURIComponent('https://domain/webapps/home/home/index');
  }

  private openNtvPageBridgeH5Login = () => {
    window.location.href = `https://domain/mkt-web/guide/cc?url=` + encodeURIComponent('https://domain/webapps/home/home/index?ntv_login');
  }

  private navBack = () => {
    setWebviewBack(1);
  }

  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.openNtvPage}>启动app打开ntv协议地址</button>
            <button className="view" onClick={this.viewCode('ntv-launch-main-web')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNtvPageH5}>启动app打开普通H5(ntv_webview_history)地址</button>
            <button className="view" onClick={this.viewCode('ntv-launch-main-web')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNtvPageBridgeH5}>启动app打开H5(bridge)地址</button>
            <button className="view" onClick={this.viewCode('ntv-launch-main-web')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNtvPageBridgeH5Login}>启动app打开H5(bridge+ntv_login)地址</button>
            <button className="view" onClick={this.viewCode('ntv-launch-main-web')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.navBack}>返回上一级</button>
            <button className="view" onClick={this.viewCode('ntv-launch-main-web')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}