import '../index.less';
import { setWebviewBack } from '../../../../plugins/navbar';
import { PluginBase } from '../../PluginBase';
import { DisplayType, setNavbar } from '../../../../plugins/navbar';
import { iconDarkBack, iconDarkService, iconDarkMessage, iconDarkArrowDown } from '../../../components/icons';

export class SetNavbarConfigDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>标题栏头部配置</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>标题栏头部配置，各种形态</div>
      </div>
    );
  }
  private webviewBack = () => {
    setWebviewBack();
  }

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

  private setWebviewLeftIcon = () => {
    setNavbar({
      left: {
        left: { type: DisplayType.Icon, value: iconDarkBack },
        right: { type: DisplayType.Text, value: '' },
      },
      center: {
        left: { type: DisplayType.Text, value: '' },
      },
    });
  }

  private setWebviewLeftIconText = () => {
    setNavbar({
      left: {
        left: { type: DisplayType.Icon, value: iconDarkBack },
        right: { type: DisplayType.Text, value: '返回' },
      },
      center: {
        left: { type: DisplayType.Text, value: '' },
      },
    });
  }
  private setWebviewCenterText = () => {
    setNavbar({
      center: {
        left: { type: DisplayType.Text, value: '中间标题' },
      },
    });
  }
  private setWebviewCenterTextWithIcon = () => {
    setNavbar({
      center: {
        left: { type: DisplayType.Text, value: '中间标题' },
        right: { type: DisplayType.Icon, value: iconDarkArrowDown },
      },
    });
  }
  private setWebviewRightTwoIcon = () => {
    setNavbar({
      right: {
        left: { type: DisplayType.Icon, value: iconDarkMessage },
        right: { type: DisplayType.Icon, value: iconDarkService },
      },
    });
  }
  private setWebviewRightOneIcon = () => {
    setNavbar({
      right: {
        left: { type: DisplayType.Icon, value: ' ' },
        right: { type: DisplayType.Icon, value: iconDarkService },
      },
    });
  }
  private setWebviewRightText = () => {
    setNavbar({
      right: {
        left: { type: DisplayType.Icon, value: ' ' },
        right: { type: DisplayType.Text, value: '券码兑换' },
      },
    });
  }
  private setWebviewRightTextIcon = () => {
    setNavbar({
      center: {
        left: {
          type: DisplayType.Text, value: '我的订单',
        },
      },
      right: {
        left: { type: DisplayType.Icon, value: iconDarkMessage },
        right: { type: DisplayType.Text, value: '券码兑换' },
      },
    });
  }

  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 className="exec" onClick={this.setWebviewLeftIcon}>左边ICON</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewLeftIconText}>左边ICON+文字</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewCenterText}>中间标题</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewCenterTextWithIcon}>中间标题+ICON</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewRightTwoIcon}>右边2个ICON</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewRightOneIcon}>右边1个ICON</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewRightText}>右边显示纯文字</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.setWebviewRightTextIcon}>右边显示纯文字+ICON</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.webviewBack}>点击上一级</button>
            <button className="view" onClick={this.viewCode('navbar-config')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}