import '../index.less';
import { setWebviewBack } from '../../../../plugins/navbar';
import { PluginBase } from '../../PluginBase';
import { setFloatNavbar, SetNavbar, INavbarParam, INavbarResult, DisplayType } from '../../../../plugins/navbar';

export class SetNavbarFloatbarSimple extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>Webview头部标题栏透明浮动测试。</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>Webview头部标题栏透明浮动测试。</div>
      </div>
    );
  }
  private webviewBack = () => {
    setWebviewBack();
  }
  private navbarParam: INavbarParam = {
    fontColor: '#ffffff',
    isStatusBarWhiteColor: 'true',
    center: {
      left: { tagName: 'center_tag_click_left', type: DisplayType.Text, value: '我的订单' },
    },
  };

  private floatNavbar: SetNavbar<INavbarResult>;
  public componentDidMount() {
    // 设置默认的bar颜色和字体颜色, 注意Native,只能是#666666 不能是#666
    this.floatNavbar = setFloatNavbar(this.navbarParam);
    // 初始化绑定
    this.floatNavbar.invokeBind((err, data) => {
      if (err) {
        alert(JSON.stringify(err));
      } else {
        alert(JSON.stringify(data));
      }
    });
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }

  public render() {
    return (
      <div className="plugin-page page-floatbar">
        <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 onClick={this.webviewBack}>点击上一级</button>
            <button onClick={this.viewCode('navbar-float-simple')}>查看代码</button>
          </div>
        </div>
        <div className="content-fill">
          <p>注意这里的内容不足一屏幕</p>
        </div>
      </div>
    );
  }
}