import { PluginBase } from '../../PluginBase';
import { shareWithPopup } from '../../../../plugins/navbar';

export class ShareThirdappPopupDemo extends PluginBase {
  private shareIcon: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg';
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>App底部弹出分享面板</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>App底部弹出分享面板</div>
    );
  }

  // 分享面板
  private shareSocialPopup = () => {
    shareWithPopup({
      shareText: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      shareDesc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
      shareUrl: 'http://www.baidu.com',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 分享WITH 自定义分享媒体渠道
  private shareSocialPopupWith = () => {
    shareWithPopup({
      shareText: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      shareDesc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
      shareUrl: 'http://www.baidu.com',
      shareTypes: ['haoyou', 'pengyouquan', 'qq', 'qqzone', 'sinaweibo'],
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  private viewCode = () => {
    this.showMarkdownPopup(require('./share-thirdapp-popup.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="body">
          <h2>微信好友</h2>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareSocialPopup}>弹出分享面板</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareSocialPopupWith}>自定义分享面板</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}