import React, {PureComponent} from 'react';
import './index.scss'
import api from '../../api'
import yaSDK from 'yoho-activity-sdk';
import cookie from 'react-cookies';
import queryString from 'query-string'

import Resource from '../components/resource';
import BottomButton from '../components/bottom-button';
import TipModal from '../components/tip-modal';

export default class wheelSurf extends PureComponent {
    constructor(props) {
        document.title ='大转盘';
        super(props);
        this.state = {
            uid: 0,
            user: {},
            epPrize: {},
            query: {},
            canStart: true,    // 可以抽奖
            slowEnding: false, // 减速结束
            startEnded: false, // 已结束

            startType: true,
            isLogin: false,
            dayLeftTimesTip: '',
            showRemain: false,

            conf: {
                loading: ''
            },
            totalParts: '',
            remainCount: '',
            
            showTipModal: false,
            modalTip: '',
            modalBtnText: '',

            gotDesc: '',
            angle: 0,          // 当前旋转角度
            speed: 0,          // 旋转速度
            stopAngle: 0,      // 停止的角度
            startSlowAngle: 0  // 起始减速的角度
        };
        
        this.init();
    }

    init = async () => {
        this.state.query = yaSDK.getQueryObj() || {};
        
        let user = await yaSDK.getUser();
        let {uid, sessionKey} = user;
        
        this.state.user = user;
        
        let setLogin = userInfo => {
            this.setState({
              uid: userInfo.uid,
              isLogin: true
            });
  
            switch (yaSDK.env) {
              case 'h5':
                if (!cookie.load('uid')) {
                  cookie.save('uid', userInfo.uid);
                  cookie.save('app_session_key', userInfo.sessionKey, { path: '/' });
                  cookie.save('app_client_type', userInfo.sessionType, { path: '/' });
                  cookie.save('app_version', userInfo.appVersion, { path: '/' });
                }
                break;
  
              case 'miniprogram':
                cookie.save('uid', userInfo.uid);
                cookie.save('app_session_key', userInfo.sessionKey, { path: '/' });
                cookie.save('app_client_type', userInfo.sessionType, { path: '/' });
                cookie.save('app_version', '6.6.0', { path: '/' });
                break;
  
              case 'app':
                cookie.save('uid', userInfo.uid);
                cookie.save('app_session_key', userInfo.sessionKey, { path: '/' });
                cookie.save('app_client_type', userInfo.sessionType, { path: '/' });
                cookie.save('app_version', userInfo.appVersion, { path: '/' });
                break;
  
              default:
                break;
  
            }
        };
        
        let updateCount = async (user) => {                                      
            let result = await api.conf({
              uid: user.uid,
              act_id: +this.state.query.actId
            });
            
            if (result && result.code === 200) {
              this.setState({
                remainCount: result.data.residueCount,
                showRemain: true
              });
            }
        };
        
        if (uid && sessionKey) {
            setLogin(user);
        } else {
            cookie.remove('uid');
            cookie.remove('app_session_key');
            cookie.remove('app_client_type');
            cookie.remove('app_version');
            
            // fix android can't auto reload page after login
            if (yaSDK.env === 'app') {
              let timer = setInterval(async () => {
                  let user = await yaSDK.getUser();
                  
                  if (user.uid && user.sessionKey) {
                    clearInterval(timer);
                    setLogin(user);
                    updateCount(user);
                  }
              }, 2000);
            }
        }
               
        let params = {act_id: +this.state.query.actId};
        
        if (uid) {
            params.uid = uid;
        }

        let result = await api.conf(params);

        if (result.code === 200) {
          
            if (yaSDK.env === 'miniprogram') {
              this.simplifyUrl(result.data.conf);
            }
          
            this.setState({
                conf: result.data.conf,
                epPrize: result.data.emptyPrize,
                totalParts: result.data.prize,
                remainCount: result.data.residueCount,
                showRemain: +uid > 0,
                dayLeftTimesTip: result.data.conf.btm_tip_one,
                startType: result.data.startType,
                startErrorType: result.data.errorType
            });
            this.setWxShare();
        } else {
            console.log(result.message)
        }
    };

    simplifyUrl = (conf) => {
      const spKeys = [
        'rule_url', 
        'jump_btn_left_url', 
        'jump_btn_middle_url', 
        'jump_btn_right_url'
      ];
      
      let url, query;
      spKeys.map(key => {
        if (!conf[key] || !conf[key].split('?')[1]) {
          return;
        }
        
        url = conf[key].split('?')[0];
        query = queryString.parse(conf[key].split('?')[1]);
        
        delete query['openby:yohobuy'];
        
        // fix 中文编码
        Object.keys(query).map(qk => {
          if (/[\u4e00-\u9fa5]/.test(query[qk])) {
            query[qk] = encodeURIComponent(query[qk]);  
          }
        });
        conf[key] = `${url}?${queryString.stringify(query)}`;
      });
    };

    setWxShare = () => {
        const {conf} = this.state;

        yaSDK.wxShare({
            title: conf.share_title,
            imgUrl: `${conf.share_img}?imageView2/1/w/200/h/200`,
            desc: conf.share_desc,
            link: conf.share_url
        });
    };

    begin = async () => {
        this.state.canStart = false;
        this.setState({
            remainCount: this.state.remainCount - 1
        });
        
        let result;
        
        try {
          result = await api.start({
            act_id: +this.state.query.actId,
            uid: this.state.user.uid,
            sessionKey: this.state.user.sessionKey,
            sessionType: this.state.user.sessionType,
            appVersion: this.state.user.appVersion
          });

          if (result.code !== 200) {
            result = {
              data: {
                type: 1,
                prize_idx: this.state.epPrize.prize_idx,
                desc: 'oops!'
              }
            }
          }
        } catch (e) {
          result = {
            data: {
              type: 1,
              prize_idx: this.state.epPrize.prize_idx,
              desc: 'oops!'
            }
          }
        }
        
        let timer = setTimeout(() => {
            clearTimeout(timer);
            this.state.stopAngle = this.calcStopAngle(result.data.prize_idx);
            this.state.gotDesc = result.data.type === 1 ? 'oops!' : '恭喜您！中奖了';
            this.setState({
                slowEnding: true
            });
            this.state.angle = this.state.stopAngle;
            this.stop(this.state.stopAngle);
        }, 2000);
    };

    calcStopAngle = idx => {
        return parseInt(360 / this.state.totalParts) * (this.state.totalParts - idx + 1) || 359; 
    };

    start = async () => {
        const {isLogin, canStart} = this.state;
        
        if (!isLogin) {
            return yaSDK.goLogin();
        }

        // 抽奖前验证是否可以抽奖
        if (this.state.startType === false) {
            return this.setState({
                showTipModal: true,
                modalTip: ['活动尚未开始', '活动已经结束'][this.state.startErrorType],
                modalBtnText: '确定'
            });
        }

        // 抽奖前验证是否可以抽奖
        if (!this.state.remainCount) {
            return this.setState({
                showTipModal: true,
                modalTip: '您今天的抽奖次数已经用完<br/>请明天再来',
                modalBtnText: '确定'
            });
        }
        
        if (!canStart) {
            return;
        }
        
        this.begin();
        this.rotate();
    };
    
    stop = angle => {
        let rotateDeg = angle + 360 * 3;
        let randCssName = 'stop_' + (new Date()).getTime();
        let randCssContent = '{' +
            'transform: rotateZ(' + rotateDeg + 'deg) !important;' +
            '-webkit-transform: rotateZ(' + rotateDeg + 'deg) !important;' +
            '-webkit-transition: transform 4s ease-out;' +
            '}';
        
        document.getElementsByTagName('style')[0].innerHTML += ('.' + randCssName + ' ' + randCssContent);
        document.getElementById('rotateWheel').className = 'wheel-bg ' + randCssName;
        document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + angle + 'deg)';


        let timer = setTimeout(() => {
            this.setState({
                startEnded: true
            });
            clearTimeout(timer);
        }, 4000);
    };

    rotate = () => {
        let {slowEnding, startEnded} = this.state;

        if (startEnded) {
            return;
        }

        if (!slowEnding) {
            if (this.state.speed < 20) {
                this.state.speed += 0.3;
            }

            this.state.angle += this.state.speed;
            if (this.state.angle >= 360) {
                this.state.angle -= 360;
            }
        }

        if (!this.state.slowEnding) {
            document.getElementById('rotateWheel').style.webkitTransform = 'rotateZ(' + this.state.angle + 'deg)';
            requestAnimationFrame(this.rotate)
        }
    };
    
    links = conf => {
        let links = [];
        
        if (conf.jump_btn_left_url) {
            links.push({
                url: conf.jump_btn_left_url,
                bg: conf.jump_btn_left_bg
            });
        }
        
        if (conf.jump_btn_middle_url) {
            links.push({
                url: conf.jump_btn_middle_url,
                bg: conf.jump_btn_middle_bg
            });
        }
        
        if (conf.jump_btn_right_url) {
            links.push({
                url: conf.jump_btn_right_url,
                bg: conf.jump_btn_right_bg
            });
        }
        return links;
    };
    
    setCanStart = () => {
        this.setState({
            canStart: true,
            slowEnding: false,
            startEnded: false,
            speed: 0
        });
        document.getElementById('rotateWheel').className = 'wheel-bg';
    };
    
    shareInApp = () => {
        const {conf} = this.state;
        
        let shareData = {
            title: conf.share_title,
            link: conf.share_url,
            desc: conf.share_desc,
            imgUrl: conf.share_img,
            hideType: ['7', '8', '9']
        };
        
        yaSDK.invokeMethod({method: 'go.showshareaction', args: shareData});
    };

    confirm = () => {
        this.setState({
            showTipModal: false
        });
    };

    jump = e => {
        let $el = e.currentTarget;
        let url = $el.getAttribute('data-url');

        if (!url) {
            return;
        }
        yaSDK.link(e)
    };

    render() {
        let {conf, slowEnding, isLogin, startEnded, remainCount, showRemain} = this.state;
        
        if (!conf.id) {
            return (
                <div className="home-wrap">
                    <img className="main-bg" src={this.state.conf.loading}/>
                </div>
            )
        }

        let links = this.links(conf);

        return (
            <div className="home-wrap">
                <img className="main-bg" src={`${conf.main_bg}?imageMogr2/format/jpg`}/>
                {conf.rule_btn_bg ? (<a data-type="other" data-url={conf.rule_url} onClick={this.jump}>
                    <img className="rule-btn" src={conf.rule_btn_bg}/>
                </a>) : ''}
                {conf.share_btn_bg && yaSDK.env === 'app' ? (<img onClick={this.shareInApp} className="share-btn" src={conf.share_btn_bg}/>): ''}
                <img className="wheel-bg" id="rotateWheel" src={conf.wheel_bg}/>
                <img onClick={()=>{this.start()}} className="start-btn-bg" src={conf.prize_btn_bg}/>
                {
                    isLogin && showRemain ?
                        (<div className="tips">
                            <p className="tip-1">{`今日剩余次数：${remainCount}次`}</p>
                        </div>) : ''
                }
    
                <BottomButton links={links} login={isLogin}/>
                <Resource code={conf.bottomContentCode}/>

                {slowEnding ? (<img className="prize-hit-bg transition" src={conf.win_prize_bg}/>) : ''}
                {startEnded ? (
                    <div className="got-tip">
                        <div className="prize-tip">{this.state.gotDesc}</div>
                        <span onClick={this.setCanStart} className="try-again">确定</span>
                    </div>
                ) : ''}
                {slowEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
                {
                    this.state.showTipModal ? <TipModal tip={this.state.modalTip} btnText={this.state.modalBtnText} confirm={() => {this.confirm()}} /> : ''
                }
            </div>
        )
    }
}