import { PluginBase } from '../../PluginBase';
import { dataCallbackToPreviousWebview } from '../../../../plugins/web/data-callback';
import { setNavbar, setWebviewBack, openNewUrlCloseBefore } from '../../../../plugins';
import { Dialog } from '../../../components/modal/Dialog';

export class DataCallbackDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>回退上一个webview，并执行上一个接口的回调函数</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        1. 返回上一个webview页面带上cbData<br />
        2. 返回上一个webview页面带上新的cbData,以及上一个页面传递过来的原始cbData的合并结果
      </div>
    );
  }

  private execDataCallback = () => {
    dataCallbackToPreviousWebview({ bizData: { hey: 'hero' } });
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }
  public componentDidMount() {
    setNavbar({
      left: { forbidBack: 'true', left: { tagName: 'left_click_back' } },
    }, (err, result) => {
      if (err) {
        alert(JSON.stringify(err));
      } else {
        if (result && result.tagName === 'left_click_back') {
          Dialog.confirm({
            children: <div>执行数据回调</div>,
            onRight: () => {
              Dialog.close();
              this.execDataCallback();
            },
          }, false);
        } else {
          alert(JSON.stringify(result));
        }
      }
    });
  }
  private webviewBack = () => {
    setWebviewBack();
  }

  private openNextCloseThis = () => {
    openNewUrlCloseBefore(
      this.getHostUrl(`/_ntv_web_data_callback_demo`),
    );
  }
  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.execDataCallback}>回退执行上一个webview回调HOOK</button>
            <button className="view" onClick={this.viewCode('exec-data-callback')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNextCloseThis}>打开新窗口C关闭当前,再回调执行callback</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>
    );
  }
}