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

export class NtvUrlWebviewHistoryDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>URL协议ntv_webview_history</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>http://domain.com?ntv_webview_history</div>
        <div>ntv_webview_history:永远打开新窗口，不存在刷新当前窗口的情况</div>
      </div>
    );
  }

  public state = {
    newUrl: '',
    newWindowUrl: '',
  };

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

  public componentDidMount() {
    this.setState({
      newUrl: 'https://www.baidu.com?ntv_webview_history&page=1#/home',
      newWindowUrl: 'https://www.baidu.com?ntv_webview_history&ntv_login&page=1#/home',
    });
  }

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

  private openNewUrl = () => {
    openNewUrl('https://www.baidu.com?ntv_webview_history&page=1#/home');
  }

  private openNewUrlWithlogin = () => {
    openNewUrl('https://www.baidu.com?ntv_webview_history&ntv_login&page=1#/home');
  }

  private openFromLocation = () => {
    window.location.href = 'https://www.baidu.com?ntv_webview_history&page=1#/home';
  }

  private openFromNewLocationWithlogin = () => {
    window.location.href = 'https://www.baidu.com?ntv_webview_history&ntv_login&page=1#/home';
  }

  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 style={{ padding: '10px' }}>
          <a href={this.state.newUrl}>地址链接打开外部H5(新窗口打开)</a> <br /><br />
          <a href={this.state.newWindowUrl}>地址链接打开外部H5(新窗口打开+登录)</a> <br /><br />
        </div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrl}>openNewUrl(打开百度)</button>
            <button className="view" onClick={this.viewCode('ntv-webview-history')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlWithlogin}>openNewUrl(打开百度+登录)</button>
            <button className="view" onClick={this.viewCode('ntv-webview-history')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openFromLocation}>window.location(打开百度)</button>
            <button className="view" onClick={this.viewCode('ntv-webview-history')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openFromNewLocationWithlogin}>window.location(打开百度+登录)</button>
            <button className="view" onClick={this.viewCode('ntv-webview-history')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.navBack}>返回上一级</button>
            <button className="view" onClick={this.viewCode('ntv-webview-history')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}