import { PluginBase } from '../../PluginBase';
import { openNewUrlWithDataCallback } from '../../../../plugins/web/open-new-url';
import { setWebviewBack } from '../../../../plugins/navbar';

export class DataCallback extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>回退上一个webview，并执行上一个webview的回调函数</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        1. 打开新webview页面<br />
        2. 打开新Native webview页面带上当前的一个业务数据cbData,可通过下一个webview页面回调过回来，并获取的原始cbData和新的webview回传的业务数据的合并结果<br />
        3. 打开新webview页面带上当前的一个业务数据cbData,可通过下一个webview页面回调过回来，并获取的原始cbData和新的webview回传的业务数据的合并结果
      </div>
    );
  }
  /**
   * 打开新窗口, 下一个webview返回(data_callback)
   * 返回新数据并带上原始的信息.
   */
  private openNewUrlWithCallback = () => {
    openNewUrlWithDataCallback(
      this.getHostUrl(`/_ntv_web_data_callback_demo`),
      { key: 'my hero' },
    ).then((result) => {
      alert(JSON.stringify(result));
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }

  private openNewUrlNtvWithCallback = () => {
    openNewUrlWithDataCallback(
      'tcfclient://main/settings', { key: 'ntv with callback' },
    ).then((result) => {
      alert(JSON.stringify(result));
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }
  /**
   * 打开新窗口，并且传递特定的数据信息到下一个webview, 待下一个webview返回(data_callback)
   * 返回新数据并带上原始的信息.
   */
  private openNewUrlWithCallbackWithCbData = () => {
    openNewUrlWithDataCallback(
      this.getHostUrl(`/_ntv_web_data_callback_demo`),
      { key: 'my hero' },
      { cbDataKey: 'cbKey1' },
    ).then((result) => {
      alert(JSON.stringify(result));
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }
  private webviewBack = () => {
    setWebviewBack();
  }
  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.openNewUrlWithCallback}>1. 打开新窗口支持数据回调</button>
            <button className="view" onClick={this.viewCode('open-newurl-with-data-callback')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlNtvWithCallback}>2. 打开Ntv页面支持数据回调</button>
            <button className="view" onClick={this.viewCode('open-newurl-with-data-callback')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlWithCallbackWithCbData}>3. 打开新窗口支持数据传递特定的缓存数据cbData</button>
            <button className="view" onClick={this.viewCode('open-newurl-with-data-callback')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button onClick={this.webviewBack}>返回上一级</button>
          </div>
        </div>
      </div>
    );
  }
}