import { PluginBase } from '../../PluginBase';
import { setCategoryEvent } from '../../../../plugins';

export class SetCategoryEventDemo 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`));
  }

  public state = {
    payload: {
      category: '事件类别',
      action: '用户行为',
      optLabel: '记录的值名称',
      optValue: '资源id',
      pagename: 'h5_test',
    },
  };

  private setCategoryEvent = () => {
    setCategoryEvent({
      category: this.state.payload.category,
      action: this.state.payload.action,
      optLabel: this.state.payload.optLabel,
      optValue: this.state.payload.optValue,
      pagename: this.state.payload.pagename,
    });
  }
  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="text-area">{JSON.stringify(this.state.payload)}</div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.setCategoryEvent}>动态事件提交</button>
            <button className="view" onClick={this.viewCode('set-category-event')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}