import { PluginBase } from '../../PluginBase';
import { setWebviewBack } from '../../../../plugins/navbar/set-webview-back';
import { openNewUrl } from '../../../../plugins/web/open-new-url';

export class OpenNewUrlDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>打开新窗口</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>在新窗口打开H5页面或者NATIVE协议的页面 tcfclient://</div>
    );
  }
  private webviewBack = () => {
    setWebviewBack();
  }

  public state = {
    value: '',
  };

  // 打开新窗口
  private openNewUrl = () => {
    const url = `https://www.baidu.com`;
    this.setState({
      value: url,
    }, () => {
      openNewUrl(url);
    });
  }

  // 打开新窗口带参数
  private openNewUrlWithParam = () => {
    const url = this.getHostUrl(`/_ntv_web_open_newurl`, {
      param: 'paramvalue',
    });
    this.setState({
      value: url,
    }, () => {
      openNewUrl(url);
    });
  }

  // 打开新窗口带HASH
  private openNewUrlWithHash = () => {
    const url = `https://www.baidu.com#/test`;
    this.setState({
      value: url,
    }, () => {
      openNewUrl(url);
    });
  }

  // 原生跳转http | Https
  private openBrowser = (http) => () => {
    const url = http === 'http' ? `https://www.baidu.com` : `http://www.baidu.com`;
    this.setState({
      value: url,
    }, () => {
      window.location.href = url;
    });
  }

  // 跳转tcfclient://协议
  private openNtvProtocol = () => {
    openNewUrl('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="text-area" contentEditable={true}>{this.state.value}</div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrl}>打开新窗口</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlWithParam}>打开新窗口带参数</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlWithHash}>打开新窗口带HASH</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openBrowser('http')}>原生跳转Http(location.href)</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openBrowser('https')}>原生跳转Https(location.href)</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNtvProtocol}>跳转tcfclient://协议</button>
            <button className="view" onClick={this.viewCode('open-newurl')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button onClick={this.webviewBack}>返回上一级</button>
          </div>
        </div>
      </div>
    );
  }
}