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

export class ShareToThirdAppDemo extends PluginBase {
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>第三方社交平台分享，除微信</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>第三方社交平台分享，除微信。</div>
    );
  }

  // QQ 分享
  private share2QQ = (shareType: 'news' | 'image' = 'news') => () => {
    shareToThirdapp({
      shareType,
      platform: 'QQ',
      title: '标题测试QQ',
      desc: '测试的描述内容 测试的描述内容',
      link: 'http://baidu.com/',
      imgUrl: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // QQ空间 分享
  private share2QQZone = (shareType: 'news' | 'image' = 'news') => () => {
    shareToThirdapp({
      shareType,
      platform: 'QQZone',
      title: '标题测试QQZone',
      desc: '测试的描述内容 测试的描述内容',
      link: 'http://baidu.com/',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 分享到新浪微博
  private share2SinaWeibo = (shareType: 'news' | 'image' = 'news') => () => {
    shareToThirdapp({
      shareType,
      platform: 'SinaWeibo',
      title: '标题测试SinaWeibo',
      desc: '测试的描述内容 测试的描述内容',
      link: 'http://baidu.com/',
      imgUrl: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 短信分享
  private share2Sms = () => {
    shareToThirdapp({
      platform: 'SMS',
      title: '10086',
      desc: '我是短信内容，点击链接http://www.baidu.com',
      link: 'http://baidu.com/',
      imgUrl: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 分享到IOS系统掉微信分享
  private share2iOSWX = () => {
    shareToThirdapp({
      platform: 'iOSWX',
      title: '标题测试iOSWX',
      desc: '测试的描述内容 测试的描述内容',
      link: 'http://baidu.com/',
      imgUrl: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  private viewCode = () => {
    this.showMarkdownPopup(require('./share-to-thirdapp.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>分享图片+链接:news (分享类型链接方式)</h2>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2QQ()}>QQ分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2QQZone()}>QQ空间分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2SinaWeibo()}>新浪微博分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2Sms}>短信分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2iOSWX}>IOS系统掉微信分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <h2>分享图片+单图:image (分享类型图片方式)</h2>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2QQ('image')}>QQ分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2QQZone('image')}>QQ空间分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.share2SinaWeibo('image')}>新浪微博分享</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}