import { PluginBase } from '../../PluginBase';
import { queryPermission } from '../../../../plugins/util/query-permission';

export class QueryPermissionDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>查询当前APP拥有的权限</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>查询当前APP指定的权限列表的开启状态</div>
      </div>
    );
  }

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

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

  private queryPermission = () => {
    queryPermission('camera', 'contacts', 'location', 'sms', 'storage', 'telephone').then(result => {
      this.setState({
        value: JSON.stringify(result, null, 2),
      });
    });
  }
  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">{this.state.value}</div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.queryPermission}>查询当前APP拥有的权限</button>
            <button className="view" onClick={this.viewCode('query-permission')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}