import React, { Component } from 'react'
import BoxContainer from '../box-container/container'
import { Toast, WhiteSpace } from "antd-mobile"
import { Popup } from "@common/index"
import { connect } from "react-redux"
import Prizes from "@components/activity/newyear-2019/common/prizes"
import BulletScreen from "@components/activity/newyear-2019/common/user-bullet-screen"
import './landing.scss'
import { browser, getParam, http, wxShare, SendMessageToApp } from "@/utils"
import QRCode from "qrcode"
import YearCourse from '../preheat/YearCourse'
import { FadeLoader } from "react-spinners"


class Landing extends Component {


  closeIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png'
  createTeamSuccessPopup = null
  joinSuccessPopup = null
  shareTipPopup = null
  swiper = null
  shareTitle = ''
  shareDesc = ''


  state = {
    teamData: {
      member: []
    },
    origin: sessionStorage.getItem('isCaptain') ? 1 : getParam('origin'),
    treasure_code: getParam('treasure_code'),
    activityEnd: false,
    notices: [],
    rule: '',
    isCaptain: getParam('origin') == 1,
    isLoading: this.props.user.isFetching
  }

  componentDidMount() {
    this.getStage();
    this.fetchPageData()
    window.showFollowAlert = this.remind.bind(this, 'create')
    document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！'
    const landing = document.querySelector('#landing')
    const boxContainer = document.querySelector('.box-container')
    if (boxContainer.offsetHeight < window.innerHeight) {
      landing.style.minHeight = `${window.innerHeight}px`
      boxContainer.style.minHeight = `${window.innerHeight}px`
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) {
      this.fetchPageData()
    }
    if(prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching){
      this.setState({
        isLoading: this.props.user.isFetching
      })
    }
  }

  componentWillUnmount() {
    this.shareTipPopup && this.shareTipPopup.remove()
  }

  // 获取活动以及宝箱的阶段
  getStage = () => {
    http.get(`${API.home}/activity/stage`).then(res => {
        const {code, data, msg} = res.data
        if (code === 200) {
            if(Number(data.activity_stage) === 0) {
                this.props.history.push('/');
                return;
            }
        } else {
            Toast.info(msg, 2)
        }
    })
  }

  createMeta = (title,dec,imgname) => {
    let meta = document.createElement('meta');
    meta.setAttribute('name', 'description')
    meta.setAttribute('itemprop', 'description')
    meta.setAttribute('content', dec)

    let meta2 = document.createElement('meta')
    meta2.setAttribute('itemprop', 'name')
    meta2.setAttribute('content', title)

    let meta3 = document.createElement('meta')
    meta3.setAttribute('itemprop', 'image')
    meta3.setAttribute('content', imgname)

    let head = document.getElementsByTagName('head')[0]
    head.appendChild(meta)
    head.appendChild(meta2)
    head.appendChild(meta3)
  }

  fetchPageData = ({origin = this.state.origin, treasure_code = this.state.treasure_code} = {}) => {
    const {location} = this.props
    http.post(`${API.home}/sys/treasure/team`, {
      treasure_code,
      origin
    })
      .then(res => {
        const {data, code, msg} = res.data
        if (code == 200) {

          this.setState({
            teamData: data,
            isCaptain: sessionStorage.getItem('isCaptain') ? sessionStorage.getItem('isCaptain') : getParam('origin') == 1,
            activityEnd: data.status == 5
          })

          this.setupWxShareConfig(data.member)

          if (browser.isWeixin) {
            wxShare({
              title: this.shareTitle,
              desc: this.shareDesc,
              link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
              imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
            })
            // history.replace(`${match.url}?treasure_code=${getParam('treasure_code')}&origin=2`)
          } else {
            this.createMeta(this.shareTitle, this.shareDesc, 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png')
          }

          let searchParams = new URLSearchParams(window.location.search)
          if (searchParams.get('origin') === '1' && !browser.isWeixin) {
            searchParams.set('origin', '2')
            sessionStorage.setItem('isCaptain', '1')
            window.history.replaceState(null, '', `landing?${searchParams.toString()}`)
          }

          this.showSharePromptWithParam()


        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  setupWxShareConfig = member => {
    const len = member.length
    let count = 5 - len <= 0 ? 4 : 5 - len
    this.shareTitle = `还差${count}人即可开宝箱，100%有奖！`
    this.shareDesc = '加入我的队伍，机械键盘，纸质书籍等超多奖品等你拿！--七月在线'
  }

  showSharePromptWithParam = () => {
    if (sessionStorage.getItem('showShareTip') && !sessionStorage.getItem('closedRemind')) {
      this.showShareTip()
    }
  }

  joinTeam = () => {
    if (this.requiredLogin()) {
      return
    }
    const {treasure_code} = this.state
    http.post(`${API.home}/sys/treasure/joinTeam`, {
      treasure_code
    })
      .then(res => {
        const {data, code, msg} = res.data
        if (code === 200) {

          /*
          *  status
          *  1-成功加入
          *  2-成功加入组队成功
          *  3-已加入当前队伍
          *  4-已加入其他队伍
          * */

          switch (data.status) {
            case 1:
            case 2:
              this.joinSuccess(data)
              break
            default:
              Toast.info(msg, 2, null, false)
          }

        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  handleToMyTreasure = id => {
    const {history} = this.props
    this.joinSuccessPopup && this.joinSuccessPopup.remove()
    if (getParam('version')) {
      window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}&version=${getParam('version')}`)
    } else {
      window.location.assign(`https://m.julyedu.com/year/yearTreasure?id=${id}`)
    }
  }

  joinSuccess = ({id, status, my_team: {team_num, lack_member, is_team, treasure_code}}) => {
    this.joinSuccessPopup = Popup({
      title: <div className={'join-success'}>
        <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/check-icon.png" alt=""/>
        <div>成功加入队伍</div>
      </div>,
      className: 'landing-join-success-wrapper',
      content: <div>
        <div className={'tip'}>
          {
            status === 2
              ? '组队成功，恭喜你获得一个宝箱！'
              : is_team
              ? <>您的{<span>{team_num}</span>}号队伍还差{<span>{lack_member}</span>}人即可获得宝箱</>
              : '自己当队长，宝箱内有专属奖品哦~'
          }
        </div>
        {
          status === 2
            ? <img style={{width: '150px', marginTop: '23px'}}
                   src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/treasure-split.gif"
                   alt=""
                   onClick={this.handleToMyTreasure.bind(this, id)}
            />
            : is_team
            ? <button type='button'
                      onClick={this.inviteMembers.bind(this, treasure_code)}>继续组队</button>
            : <button type="button" onClick={this.createMyTeam}>创建我的队伍</button>
        }
      </div>,
      closeIcon: this.closeIcon,
      close: () => {
        this.fetchPageData()
        this.getFollowStatus()
          .then(isFollow => {
            !isFollow && this.remind('join', this.state.treasure_code, 2)
          })
      }
    })
  }

  inviteMembers = treasure_code => {
    const {history, match, user, location} = this.props
    if (getParam('version')) {
      let data = {
        title: this.shareTitle,
        desc: this.shareDesc,
        link: `${window.location.origin}${location.pathname}?treasure_code=${treasure_code}&origin=2`,
        imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
      }
      SendMessageToApp("toShare", data)
    }
    sessionStorage.setItem('showShareTip', '1')
    history.replace(`${match.url}?treasure_code=${treasure_code}&origin=${1}`)
    this.createTeamSuccessPopup && this.createTeamSuccessPopup.remove() && (this.createTeamSuccessPopup = null)
    this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
    this.fetchPageData({treasure_code, origin: 1})
    this.setState({
      isCaptain: true
    })
  }

  getFollowStatus = () => http.get(`${API.home}/sys/user/isFollowWeChat`)
    .then(res => {
      const {code, data} = res.data
      return code === 200 && data['is_follow']
    })

  createTeamSuccess = ({member, team_num, lack_member, treasure_code}) => {
    this.joinSuccessPopup && this.joinSuccessPopup.remove() && (this.joinSuccessPopup = null)
    this.getFollowStatus()
      .then(isFollow => {
        this.createTeamSuccessPopup = Popup({
          title: '创建成功',
          className: 'landing-create-success',
          content: <div>
            <div className="tip">{<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~</div>
            <img className={'treasure-box'}
                 src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt=""/>
            <ul className='members'>
              {
                new Array(5).fill('a').map((item, index) => {
                  const _member = member[index]
                  return <li key={index}>
                    {_member && _member['is_captain'] && <sup>队长</sup>}
                    <img
                      className={'avatar'}
                      src={
                        _member
                          ? _member['head_img']
                          : "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
                      }
                      alt=""/>
                  </li>
                })
              }
            </ul>
            <button type={'button'} onClick={this.inviteMembers.bind(this, treasure_code)}>邀请好友加入队伍</button>
          </div>,
          closeIcon: this.closeIcon,
          afterClose: () => {
            if (!isFollow) {
              this.remind('create', treasure_code)
            }
          }
        })

      })
  }

  // 安卓手机保存二维码
  saveImage = url => {
    let version = getParam('version')
    version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
    if (version && parseInt(version) < 451) {
      Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
    } else {
      SendMessageToApp('generateQRCode', url)
    }
  }


  remind = (type = 'create', treasure_code, origin = 1) => {
    const {user} = this.props
    http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
      .then(res => {
        const {data} = res.data
        return data.url
      }).then(text => {
      QRCode.toDataURL(text)
        .then(url => {
          Popup({
            title: '提醒服务',
            className: 'landing-remind',
            closeIcon: this.closeIcon,
            content: <div>
              <div className="des">{type === 'create' ? '有好友加入队伍后第一时间通知我~' : '获得宝箱时第一时间通知我~'}</div>
              <img src={url} alt=""/>
              {browser.isAndroidApp ? <div>
                <button className={'android-qr-code-btn'} onClick={this.saveImage.bind(this, text)}>保存二维码</button>
              </div> : null}
              <div className="des">长按识别/扫码 关注【七月在线】服务号即可预约</div>
            </div>,
            close: () => {
              // history.replace(`${match.path}?treasure_code=${treasure_code}&origin=1`)
              sessionStorage.setItem('closedRemind', '1')
              this.fetchPageData({
                treasure_code,
                origin
              })
            }
          })
        })
    })

  }

  showShareTip = () => {
    const {user, location} = this.props
    if (browser.isAndroidApp || browser.isIOSApp) {

      SendMessageToApp('toShare', {
        title: this.shareTitle,
        desc: this.shareDesc,
        link: `${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=2`,
        imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png'
      })

    } else {
      this.shareTipPopup = Popup({
        title: <div>还差<span>{this.state.teamData.lack_member}</span>名队友即可获得宝箱 快分享给好友吧~</div>,
        className: `landing-share-tip ${browser.isWeixin ? 'wechat' : ''}`,
        closable: false,
        close: () => {
          sessionStorage.removeItem('showShareTip')
          if (!user.hasError) {
            this.getFollowStatus()
              .then(isFollow => {
                !isFollow && this.remind('create', getParam('treasure_code'), 1)
              })
          }
        }
      })
    }
  }

  showOpenInBrowserTip = () => {
    Popup({
      title: <div>点击右上角，选择“在浏览器打开”</div>,
      className: 'landing-open-in-browser-tip',
      closable: false,
    })
  }

  createMyTeam = () => {
    if (this.requiredLogin()) {
      return
    }
    http.get(`${API.home}/sys/treasure/createMyTeam`)
      .then(res => {
        const {data, code, msg} = res.data
        if (code == 200) {

          this.createTeamSuccess(data)

        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  requiredLogin = () => {
    const {history, user, location} = this.props
    if (user.hasError) {
      if (browser.isWeixin) {
        window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(`${window.location.origin}${location.pathname}?treasure_code=${getParam('treasure_code')}&origin=${getParam('origin')}&aa=bb`)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
      } else {
        history.push('/passport')
      }
      return true
    }
  }

  toSquare = () => {
    const {history} = this.props
    if (!getParam('version')) {
      window.location.assign('https://m.julyedu.com/year/yearindex')
    } else {
      window.location.assign('https://m.julyedu.com/year/yearindex?version=' + getParam('version'))
    }
  }

  render() {
    const {
      teamData: {
        head_img,
        member,
        status,
        lack_member,
        team_num,
        prize_info,
        my_team,
        standby_plan
      },
      activityEnd,
      isCaptain,
      isLoading
    } = this.state
    /*
    * status
    * 1-自己的队伍
    * 2-未加入队伍
    * 3-已加入当前队伍
    * 4-已加入别的队伍
    * */
    return (
      <div id={'landing'}>
        {
          !(standby_plan && browser.isWeixin) &&
          <div id="to-square">
            <a href='javascript:' onClick={this.toSquare}>前往活动会场，享更多福利！ >></a>
          </div>
        }
        <BoxContainer>
          <i className={`snow-deco ${standby_plan && browser.isWeixin ? 'standby' : ''}`}/>
          {
            standby_plan && browser.isWeixin &&
            <>
              <WhiteSpace className={'standby-space'}/>
              <div className={'standby-tip'}>点击右上角，选择“在浏览器打开”</div>
            </>
          }
          <img className='main-avatar'
               src={head_img} alt=""/>
          {
            status === 1
              ? <div className="des">邀请好友加入队伍，开宝箱领取丰厚奖品~</div>
              : <div className="des">加入我的<span>{team_num}</span>号队伍，一起开宝箱领取丰厚奖品~</div>
          }
          <Prizes showSystemNotices={false}/>
          <BulletScreen/>
          <div className="group">
            <ul className={'member'}>
              {
                member && member.length &&
                new Array(5).fill('a').map((item, index) => {
                  const _member = member[index]
                  return (
                    _member
                      ? <li key={index}>
                        <div className='avatar-wrapper'>
                          {
                            _member.is_captain ? <sup>队长</sup> : null
                          }
                          <img
                            src={_member.head_img}
                            alt=""
                            className="avatar"/>
                        </div>
                      </li>
                      :
                      <li key={index}>
                        <div className="avatar-wrapper">
                          <img
                            src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png"
                            alt=""
                            className="avatar"/>
                        </div>
                      </li>
                  )
                })
              }
            </ul>
            <ul className={'bars'}>
              {
                member && member.length &&
                new Array(5).fill('a').map((item, index) => {
                  return (
                    <li key={index} className={`${index < member.length ? 'active' : ''}`}/>
                  )
                })
              }
            </ul>
            {
              status === 1 && !activityEnd &&
              <>
                <div className="group-des">
                  还差 {lack_member} 名队员即可获得当前宝箱哦~
                </div>
                {
                  !(standby_plan && browser.isWeixin) &&
                  <button type='button' className={'invite-btn'} onClick={this.showShareTip}>
                    邀请好友加入队伍
                  </button>
                }
              </>
            }
            {
              status === 3 && !activityEnd &&
              <>
                <div className="group-des">
                  <p>已加入当前队伍</p>
                  {
                    my_team['is_team']
                      ? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p>
                      : <p>自己当队长，宝箱内有专属奖品哦~</p>
                  }
                </div>
                {
                  !(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
                    <button type='button' className={'invite-btn'}
                            onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
                      继续组队
                    </button>
                    : <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
                      创建我的队伍
                    </button>)
                }
              </>
            }
            {
              status === 4 && !activityEnd &&
              <>
                <div className="group-des">
                  <p>已加入其他队伍</p>
                  {
                    my_team['is_team']
                      ? <p>您的{my_team['team_num']}号队伍还差{my_team['lack_member']}人即可获得宝箱~</p>
                      : <p>自己当队长，宝箱内有专属奖品哦~</p>
                  }
                </div>
                {
                  !(standby_plan && browser.isWeixin) && (my_team['is_team'] ?
                    <button type='button' className={'invite-btn'}
                            onClick={this.inviteMembers.bind(this, my_team['treasure_code'])}>
                      继续组队
                    </button>
                    : <button type='button' className={'invite-btn'} onClick={this.createMyTeam}>
                      创建我的队伍
                    </button>)
                }
              </>
            }
            {
              !(standby_plan && browser.isWeixin) && status === 2 && !activityEnd &&
              < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
                同意加入队伍
              </button>
            }
            {
              prize_info && prize_info.length !== 0 && !activityEnd && !isCaptain && <div className="certainly-prompt">
                第{prize_info[0].stage_no}个宝箱必中 {prize_info[0].name}
              </div>
            }
            {
              activityEnd &&
              <div className='activity-end'>
                <div>活动已结束</div>
                <div>关注【七月在线】服务号了解更多活动信息</div>
                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""/>
                <div>长按识别 / 微信扫码</div>
              </div>
            }
          </div>
        </BoxContainer>
        {
          !isCaptain &&
          <>
            <WhiteSpace size={'xl'}/>
            <YearCourse getSum={() => {
            }}/>
          </>
        }
        {
          isLoading && <div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
            <FadeLoader
              color={'#fff'}
              loading={isLoading}
            />
          </div>
        }
      </div>
    )
  }
}

export default connect(
  state => ({user: state.user}),
  null
)(Landing)
