import * as React from 'react';
import { Props, State } from './type';
import styled from 'styled-components'
import { callHandler } from 'nejsbridge/dist/bridge.lofter.es'
import { rem } from '../style/function.style'
import { openAppLofter } from 'nw-app-lofter'
import { isLofter } from 'nw-detect'
import { showMessage } from '../common/toast/toast'
import { TemplateActivityContext } from '../common/template-context'
import { get } from '../utils/request';
const Text = styled.div`
  box-sizing: border-box;
  padding: ${rem(20)} ${rem(24)};
  background:#26279d;
  text-align:center;
  color:#FFF60E;
  font-size: ${rem(22)}
`

export class ShareButton extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  static contextType = TemplateActivityContext
  context: React.ContextType<typeof TemplateActivityContext> = {} as any

  render() {
    const { style, isEdit } = this.props;
    const activityInfo = this.context?.activityInfo
    const shareClick = () => {
      const currentTime = new Date().getTime(); // 当前时间小于结束时间才可以分享
      if (currentTime < new Date("2022-01-15").getTime()) {
        console.log('点击我要分享');
        if (!isLofter()) {
          openAppLofter({
            path: 'webview',
            query: {
              url: window.location.href
            }
          })
        } else {
          const shareContent = {
            url: `https://www.lofter.com/front/blog/home-page/${activityInfo?.actUserInfo?.blogInfo.blogName}`, // 个人主页
            content: {
              weiboImg:'https://imglf5.lf127.net/bkimg/20211108155242/b8823b16-f56f-46ee-af5d-86e2d0d93379.jpg',
              weiboDesc:
              `故事精不精彩，你说了算！点击领取“礼物”，为#${activityInfo?.actUserInfo?.blogInfo.blogNickName}#加油助力吧！`,
              fImg: 'https://imglf5.lf127.net/bkimg/20211108155242/b8823b16-f56f-46ee-af5d-86e2d0d93379.jpg',
              fTitle: `#${activityInfo?.actUserInfo?.blogInfo.blogNickName}#正在参加网易元气故事大赛`,
              fDesc: `故事精不精彩，你说了算！点击领取“礼物”，为#${activityInfo?.actUserInfo?.blogInfo.blogNickName}#加油助力吧！`,
              domain: [] as any[],
              lofterContent: {
                lTitle: `#${activityInfo?.actUserInfo?.blogInfo.blogNickName}#正在参加网易元气故事大赛`,
                lImg: 'https://imglf5.lf127.net/bkimg/20211108155242/b8823b16-f56f-46ee-af5d-86e2d0d93379.jpg',
                price: 15,
                ext: '',
              },
            }
          }
          callHandler('njb_share', {
            shareCnt: shareContent
          })
        }
      }
      // const ua = window.navigator.userAgent.toLowerCase()
      // 如果在站外，跳转到站内打开活动页
      else {
        showMessage({
          text: '活动已结束'
        })
      }
    }
    console.log('activityInfo', activityInfo)
    return (
      <Text>
        {activityInfo?.actUserInfo?.signup &&
          <div>
            <img onClick={shareClick} src="https://lofter.lf127.net/1634798196208/IMG20211021_143506.png"
              style={{ width: `${rem(280)}`, height: `${rem(81)}` }}></img>
            <div style={{ margin: `${rem(35)} ${rem(110)}`, width: `${rem(480)}` }}>
              已报名作者点击上方按钮分享个人主页,<br />支持者可通过专属分享链接获得更多粮票喔~
            </div>
          </div>
        }
        <div style={{
          margin: `0 ${rem(18)} ${rem(10)} ${rem(18)}`,
          backgroundColor: '#1e1f7e',
          color: '#FFFFFF',
          fontSize: rem(20),
          textAlign: 'left'
        }}>
          <p style={{
            padding: `${rem(15)} ${rem(25)}`,
          }}>
            1.投票开启时间：2021年11月9日—2021年12月30日<br />
            2.仅统计投票周期内，作者报名后获得的免费礼物数，记得报名哟~<br />
            3.请按活动规则添加正确的活动标签与赛道标签，以免影响票数统计,点击查看更多
            <a style={{ textDecoration: 'underline', color: '#e3db1c' }} href="https://www.lofter.com/cms/26014/gift.html" >投票规则</a>
          </p>
        </div>
      </Text>
    )
  }
}