import { PluginBase } from '../../PluginBase';
import { scanBankCard } from '../../../../plugins/util/scan-bank-card';

export class ScanBankCardDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>启动扫描身份证号码</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>启动扫描身份证号码返回的报文参考 "查看代码"</div>
      </div>
    );
  }

  public state = {
    value: '',
    cardNo: '',
  };

  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }
  // 直接打开扫描，不打开新ACTIVITY
  private openScanBankCardSdk = () => {
    scanBankCard({
      scanMode: 'quick',
    }).then(result => {
      this.setState({
        cardNo: result.cardInfo.cardNo,
        value: result.cardInfo.idCardImgBase64,
      });
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }
  // 打开新ACTIVITY流程扫描扫描完毕，点击按钮返回
  private openScanBankCardSdk2 = () => {
    scanBankCard({
      scanMode: 'activity',
    }).then(result => {
      this.setState({
        cardNo: result.cardInfo.cardNo,
        value: result.cardInfo.idCardImgBase64,
      });
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }

  public render() {
    const base64 = `url(data:image/jpeg;base64,${this.state.value})`;
    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" style={{ 'background-image': base64 }}></div>
        <h2>Bank CardNo</h2>
        <input type="text" value={this.state.cardNo} style={{ width: '100%', margin: '10px 0' }} />
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.openScanBankCardSdk}>调用扫描银行卡(简单模式)</button>
            <button className="view" onClick={this.viewCode('scan-bank-card')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.openScanBankCardSdk2}>调用扫描银行卡启动Native Activity</button>
            <button className="view" onClick={this.viewCode('scan-bank-card')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}