import { PluginBase } from '../../PluginBase';
import { setPageTitle } from '../../../../plugins/navbar';
import { openNewUrl } from '../../../../plugins/web';

export class SetNavbar extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return <div>设置webview标题栏信息</div>;
  }
  public getPluginFullDesc(): JSX.Element {
    return <div>
      <p>设置标题栏各种配置，包括左边，中间，右边的各种定义，点击回调</p>
      <p>URL协议参数说明:<br />
        1.ntv_bar_float:表示标题栏浮动不占据页面空间, 如果float模式，默认标题栏一开始就是纯透明的 <br />
        {/* 2.ntv_login: 表示进入当前页面之前判断是否登录，未登录，先登录再跳转进入页面 <br /> */}
        2.ntv_webview_new: URL链接打开新窗口
      </p>
      <p>
        原生页面跳转支持：
          支持：http://domain.com/home/index?ntv_bar_float&ntv_login&ntv_bar_hidden  <br />
        (ntv_bar_float， ntv_login， ntv_bar_hidden)
      </p>
    </div>;
  }

  public componentDidMount() {
    this.setPageSpinner(false);
  }

  // 只设置标题栏参数
  private setPageTitle = () => {
    setPageTitle('自定义标题内容' + Math.random());
  }

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

  private setNavbarConfig = () => {
    openNewUrl(this.getHostUrl(`/_ntv_bar_set_navbar_config`));
  }

  // 设置标题栏带CALLBACK
  private setNavbarWithCallback = () => {
    openNewUrl(this.getHostUrl(`/_ntv_bar_set_navbar_with_callback`));
  }
  // 标题栏浮动
  private setNavbarFloatWebview = () => {
    openNewUrl(this.getHostUrl(`/_ntv_bar_set_navbar_floatbar_simple`, {
      ntv_bar_float: '',
    }));
  }

  // 简单透明标题栏
  private setNavbarFloat = () => {
    openNewUrl(this.getHostUrl(`/_ntv_bar_set_navbar_floatbar`, {
      ntv_bar_float: '',
    }));
  }

  // 禁用标题栏默认返回
  private setNavbarDisableBack = () => {
    openNewUrl(this.getHostUrl(`/_ntv_bar_set_navbar_no_goback`));
  }

  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.setPageTitle}>设置自定义标题</button>
          <button className="view" onClick={this.viewCode('set-page-title')}>查看代码</button>
        </div>
        <div className="play-body-item">
          <button className="exec" onClick={this.setNavbarConfig}>自定义标题栏形态</button>
          <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
        </div>
        <div className="play-body-item">
          <button className="exec" onClick={this.setNavbarWithCallback}>标题栏绑定回调函数</button>
          <button className="view" onClick={this.viewCode('navbar-with-callback')}>查看代码</button>
        </div>
        <div className="play-body-item">
          <button className="exec" onClick={this.setNavbarFloatWebview}>跳转到简单透明标题栏</button>
          <button className="view" onClick={this.viewCode('navbar-float-simple')}>查看代码</button>
        </div>
        <div className="play-body-item">
          <button className="exec" onClick={this.setNavbarFloat}>标题栏浮动</button>
          <button className="view" onClick={this.viewCode('navbar-float-opacity')}>查看代码</button>
        </div>
        <div className="play-body-item">
          <button className="exec" onClick={this.setNavbarDisableBack}>标题栏禁用默认的返回</button>
          <button className="view" onClick={this.viewCode('navbar-no-goback')}>查看代码</button>
        </div>
      </div>
    </div>;
  }
}