import { PluginBase } from '../PluginBase';
import { weixinPay } from '../../../plugins/pay/weixin';

export class WeixinPayDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>启动微信Native收银台SDK</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>启动微信Native收银台SDK "查看代码"</div>
      </div>
    );
  }

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

  public state = {
    // 替换成商户app信息
    payload: JSON.stringify({
      appId: '',
      nonceStr: '',
      packageValue: 'Sign=WXPay',
      partnerId: '',
      prepayId: '',
      sign: '',
      timeStamp: '1548929929',
    }, null, 2),
  };

  private invokeWexinPay = () => {
    weixinPay({
      payOrderInfo: JSON.parse(this.state.payload),
    }).then((result) => {
      alert(JSON.stringify(result));
    }).catch(err => {
      alert('err' + JSON.stringify(err));
    });
  }

  private handleChange = (e) => {
    this.setState({
      payload: e.target.value,
    });
  }
  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>
        <h2>自定义数据注意填写JSON.stringify(payload)</h2>
        <textarea className="text-area" onInput={this.handleChange}>
          {this.state.payload}
        </textarea>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.invokeWexinPay}>调用微信sdk支付</button>
            <button className="view" onClick={this.viewCode('weixin-pay')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}