import { PluginBase } from '../PluginBase';
import { getAllContacts, getSelectedContact } from '../../../plugins/user';

export class GetAllContactsDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>静默获取所有联系人的信息列表</div>
    );
  }

  public getPluginFullDesc(): JSX.Element {
    return (
      <div>
        <div>静默获取所有联系人的信息列表</div>
      </div>
    );
  }
  public state = {
    payload: JSON.stringify([]),
    selected: JSON.stringify({}),
    all: JSON.stringify([]),
  };

  private getAllContacts = () => {
    getAllContacts().then(result => {
      this.setState({
        payload: JSON.stringify(result),
      });
    }).catch(err => {
      alert(JSON.stringify(err));
    });
  }

  private getConcurrenceContacts = () => {
    getSelectedContact().then((selected) => {
      getAllContacts().then((all) => {
        this.setState({
          payload: JSON.stringify({
            selected, all,
          }),
        });
      });
    })
    .catch((err) => {
      alert(JSON.stringify(err));
    });
  }

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

  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" contentEditable={true}>
          {this.state.payload}
        </div>
        <div className="body">
          <div className="play-body-item">
            <button className="exec" onClick={this.getAllContacts}>获取所有联系人信息</button>
            <button className="view" onClick={this.viewCode('get-all-contacts')}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.getConcurrenceContacts}>[并发]获取联系人信息</button>
            <button className="view" onClick={this.viewCode('get-all-contacts')}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}