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

export class SetWebviewCacheDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>设置客户端缓存信息</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>设置客户端缓存信息</div>
      </div>
    );
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  private setWebviewCache = () => {
    setWebviewCache({
      projectTag: 'test_project',
      setMap: {
        key1: 'value1', key2: 'value2', key3: 'value3', keynum1: '1', keynum2: '2',
      },
    }).then(result => {
      alert(result);
    }).catch(e => {
      alert('err' + JSON.stringify(e));
    });
  }

  private openNewUrlGetCache = () => {
    const url = this.getHostUrl(`/_ntv_util_get_webview_cache`, {
      param: 'paramvalue',
    });
    openNewUrl(url);
  }

  private callbackTo = () => {
    setWebviewCache({
      projectTag: 'test_project',
      setMap: {
        key1: 'new new key', key2: 'value2', key3: 'value3', keynum1: '1', keynum2: '2',
      },
    }).then(result => {
      alert(result);
      // 前一个窗口去查看是否有Key1
      dataCallbackToPreviousWebview({
        key1: 'new new key1',
      });
    }).catch(e => {
      alert('err' + JSON.stringify(e));
    });
  }

  private clearCache = () => {
    setWebviewCache({
      projectTag: 'test_project',
      setMap: {
        key1: '',
      },
    }).then(result => {
      alert(JSON.stringify(result));
    }).catch(e => {
      alert(JSON.stringify(e));
    });
  }

  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.setWebviewCache}>设置客户端缓存信息</button>
            <button className="view" onClick={this.viewCode('set-webview-cache')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openNewUrlGetCache}>新窗口获取客户端缓存信息</button>
            <button className="view" onClick={this.viewCode('set-webview-cache')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.callbackTo}>数据回调上一个WEBVIEW并获取缓存信息</button>
            <button className="view" onClick={this.viewCode('set-webview-cache')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.clearCache}>清除缓存key1数据</button>
            <button className="view" onClick={this.viewCode('set-webview-cache')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}