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

export class ShareToWeixinDemo extends PluginBase {
  private shareIcon: 'http://pic24.photophoto.cn/20120814/0005018348123206_b.jpg';
  public getPluginShortDesc(): JSX.Element {
    return (
      <div>微信的文字，音频，等分享</div>
    );
  }
  public getPluginFullDesc(): JSX.Element {
    return (
      <div>微信的文字，音频，等分享</div>
    );
  }

  // 微信分享 webpage timeline -朋友圈
  private shareTimeline = () => {
    shareToWeixin({
      scene: 'timeline',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: 'https://www.baidu.com',
      type: 'webpage',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 微信分享 img timeline -朋友圈
  private shareImageTimeline = () => {
    shareToWeixin({
      scene: 'timeline',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
      link: 'https://www.baidu.com',
      type: 'img',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }
  // 微信收藏 webpage favorite
  private shareWebpageFavorite = () => {
    shareToWeixin({
      scene: 'favorite',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: 'https://www.baidu.com',
      type: 'webpage',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }
  // 微信收藏 img favorite
  private shareImgFavorite = () => {
    shareToWeixin({
      scene: 'favorite',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
      link: 'https://www.baidu.com',
      type: 'img',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }
  // 微信分享-文本 text session
  private shareText = () => {
    shareToWeixin({
      scene: 'session',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: '',
      type: 'text',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 微信分享-图片 img | session
  private shareImage = () => {
    shareToWeixin({
      scene: 'session',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: 'https://dimg04.c-ctrip.com/images/700p12000000rpsgxA70A_1920_340_17.jpg',
      link: '',
      type: 'img',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 微信分享-音乐 music session
  private shareMusic = () => {
    shareToWeixin({
      scene: 'session',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: 'https://www.baidu.com',
      dataUrl: 'http://www.170hi.com/kw/sd.sycdn.kuwo.cn/resource/n2/4/14/2814596013.mp3',
      type: 'music',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 微信分享-视频 video session
  private shareVideo = () => {
    shareToWeixin({
      scene: 'session',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: '',
      dataUrl: 'https://app.fc.com/fed/webapp/jsp/test.mp4',
      type: 'video',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  // 微信分享-网页 webpage session
  private shareWebpage = () => {
    shareToWeixin({
      scene: 'session',
      title: '标题测试 分享标题分享标题分享标题分享标题分享标题分享标题分享标题',
      desc: '测试的描述内容测试的描述内容测试的描述内容测试的描述内容测试的描述内容',
      imgUrl: this.shareIcon,
      link: 'https://www.baidu.com',
      type: 'webpage',
    }).then((result => {
      alert(JSON.stringify(result));
    }));
  }

  private viewCode = () => {
    this.showMarkdownPopup(require('./share-to-weixin.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.shareText}>微信分享-文本</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareImage}>微信分享-图片</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareMusic}>微信分享-音乐</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareVideo}>微信分享-视频</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareWebpage}>微信分享-网页</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <h2>微信朋友圈</h2>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareTimeline}>微信分享-webpage timeline</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareImageTimeline}>微信分享-img timeline</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <h2>微信收藏</h2>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareWebpageFavorite}>微信收藏 webpage favorite</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
          <div className="play-body-item">
            <button className="exec" onClick={this.shareImgFavorite}>微信收藏 img favorite</button>
            <button className="view" onClick={this.viewCode}>查看代码</button>
          </div>
        </div>
      </div>
    );
  }
}