import { setWebviewBack } from '../../../../plugins/navbar';
import { PluginBase } from '../../PluginBase';
import { setNavbar, DisplayType, ILeft, ICenter, IRight } from '../../../../plugins/navbar';
import { iconDarkBack, iconDarkService, iconDarkMessage } from '../../../components/icons';

export class SetNavbarWithCallback extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>Webview头部标题栏带CLICK回调事件。</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>左测黑色箭头Icon， 中间文本，右侧客服Icon</div>
      </div>
    );
  }

  public componentDidMount() {
    const leftArea: ILeft = {
      left: { tagName: 'left_left', type: DisplayType.Icon, value: iconDarkBack },
    };
    const centerArea: ICenter = {
      left: { tagName: 'center_left', type: DisplayType.Text, value: '标题栏带回调测试' },
    };
    const rightArea: IRight = {
      left: { tagName: 'right_left', type: DisplayType.Icon, value: iconDarkService },
      right: { tagName: 'right_right', type: DisplayType.Icon, value: iconDarkMessage },
    };
    setNavbar({ left: leftArea, center: centerArea, right: rightArea }, (err, result) => {
      if (err) {
        alert(JSON.stringify(err));
      } else {
        alert(JSON.stringify(result));
      }
    });
  }
  private webviewBack = () => {
    setWebviewBack();
  }
  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }
  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 onClick={this.webviewBack}>返回上一级</button>
            <button onClick={this.viewCode('navbar-with-callback')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}