import { PluginBase } from '../PluginBase';
import { getLocation } from '../../../plugins/map/locate';

export class AppLocationDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>获取定位信息</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>获取定位信息<br />
          客户端定位loading框是否展示, "1":显示(默认), "2":不显示<br />
          <p> <strong>param1</strong>: showType: '1' | '2';</p>
          "1" 使用缓存，如果没有缓存，发起定位(默认) "2" 不使用缓存，强制发起定位 "3" 使用缓存(无论有无都返回)<br />
          <p><strong>param2</strong>: cacheType: '1' | '2' | '3';</p>
          定位请求弹框是否显示(无定位权限时，进行弹框提示) true: 显示(默认), false: 不显示；<br />
          当true强制弹窗拿定位，每次都弹，如果false第一次用户拒绝了，下一次就不弹窗了，native自行缓存此状态<br />
          <p><strong>param3</strong>: locationAlert: 'true' | 'false';</p>
        </div>
      </div>
    );
  }

  public state = {
    command: JSON.stringify({}),
    value: JSON.stringify({}),
  };

  private viewCode = (mdPath) => () => {
    this.showMarkdownPopup(require(`./${mdPath}.md`));
  }
  private getAppLocation = (cacheType: any, locationAlert: any) => () => {
    this.setState({
      value: JSON.stringify({}),
      command: JSON.stringify({ cacheType, locationAlert }),
    }, () => {
      getLocation({
        showType: '1',
        cacheType,
        locationAlert,
      }).then(result => {
        this.setState({
          value: JSON.stringify(result),
        });
      }).catch(err => {
        alert('err' + JSON.stringify(err));
      });
    });
  }

  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>command: {this.state.command}</div>
        <div class="text-area">{this.state.value}</div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('1', 'true')}>获取定位信息['1', 'true']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('2', 'true')}>获取定位信息['2', 'true']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('3', 'true')}>获取定位信息['3', 'true']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('1', 'false')}>获取定位信息['1', 'false']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('2', 'false')}>获取定位信息['2', 'false']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getAppLocation('3', 'false')}>获取定位信息['3', 'false']</button>
            <button className="view" onClick={this.viewCode('app-location')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}