import React, {Component} from 'react'
import QRCode from 'qrcode'
import {http, SendMessageToApp, wxShare, is_weixin, getParam} from '@/utils';
import {Link} from 'react-router-dom'
import {throttle, findIndex, debounce} from 'lodash'
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
import CourseList from './courseList/index'
import SharePopup from './sharePopup/index'
import LuckDraw from './luckDraw/index'
import CollectBlessing from './collectBlessing/index'
import ReserveCourse from './ReserveCourse/index'
import ListHeader from './listHeader/index'
import LevelTest from './levelTest/index'
import RankList from './rankList/index'
import './index.scss'
import {Popup} from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import {Toast} from "antd-mobile"
import Live from './live'
import Banner from './banner'
import cookie from "js-cookie";
import {setCurrentUser, startFetchUser} from "@/store/userAction"
import {addDays} from "date-fns";
import {compose} from "redux";
import {connect} from "react-redux";


class BlessingPreheat extends Component {

    constructor(props) {
        super(props)
        this.navTop = 183
        this.prevY = 0
        this.state = {
            userInfoList: [],
            isRule: false,
            isCourse: false,
            inviteUrl: '',
            inviteVisible: false,
            joinLotteryVisible: false,
            timelineShareVisible: false,
            showRecordList: false,
            isFormal: false, // 1正式 0 预热
            isServer: false,
            serverUrl: '',
            shareMark: false,
            userInfo: {},
            isSign: false,
            navs: [
                {
                    text: '积福气',
                    id: 'lucky-value'
                },
                {
                    text: '幸运大抽奖',
                    id: 'lucky-draw'
                },
                {
                    text: '预付定金',
                    id: 'deposit'
                },
                {
                    text: '精品特惠',
                    id: 'best-courses'
                },
                {
                    text: 'AI测试',
                    id: 'ai-test'
                },
                {
                    text: '大咖直播',
                    id: 'live'
                },
            ],
            index: 0,
            userHasError: props.user.hasError
        }
    }

    componentDidMount() {
        this.fetchUserBlessing();
        this.setInitialNavActiveStatus()
        window.addEventListener('scroll', throttle(this.calcNavActive, 100));
        if (is_weixin()) {
            wxShare({
                title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
                desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
                link: window.location.href,
                imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
            })
        }

        // 获取App登录信息
        window['loginInfo'] = result => {
            this.loginInfo(result)
        }

        window['getNewData'] = result => {
            this.fetchUserBlessing();
        }

    }


    // 获取app登录数据
    loginInfo = (result) => {
        this.setState({
            userInfoList: result
        })
        if (this.state.userInfoList.length !== 0) {
            this.props.startFetchUser()
            this.appLogin()
        }
    }
    // 保存cookie
    appLogin = () => {
        let expires = addDays(new Date(), 90)
        this.state.userInfoList.map((item, index) => {
            Toast.info(item.version, 3)
            cookie.set("token", item.token, {expires, path: '/', domain: 'julyedu.com'});
            cookie.set("plat", item.plat, {expires, path: '/', domain: 'julyedu.com'});
            cookie.set("uid", item.uid, {expires, path: '/', domain: 'julyedu.com'});
            cookie.set("uname", item.uname, {expires, path: '/', domain: 'julyedu.com'});
            cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: 'julyedu.com'});
        });
        this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
    }
    transformUser = res => {
        let payload

        res.map((item, index) => {
            payload = {
                hasError: false,
                data: {
                    username: item.uname,
                    avatar: item.avatar_file,
                    token: item.token,
                    uid: item.uid
                },
                isFetching: false
            }
        })

        return payload
    }


    getActiveIndex = (arr, n) => {
        for (let i = 0, len = arr.length; i < len; i++) {
            if (arr[i] > n) {
                if (!i) {
                    return i
                } else {
                    if (Math.abs(n - arr[i]) < Math.abs(n - arr[i - 1])) {
                        return i
                    } else {
                        return i - 1
                    }
                }
            }
        }
        return arr.length - 1
    }

    setInitialNavActiveStatus = () => {
        const observer = new MutationObserver(debounce((list, observer) => {
            const navs = this.state.navs.map(item => document.querySelector(`#${item.id}`))
            if (navs.every(item => item)) {
                const navsTop = navs.map(item => item.offsetTop)
                const index = this.getActiveIndex(navsTop, window.pageYOffset)
                this.setState({index, navsTop}, () => {
                    this.calcNavActive()
                    observer.disconnect()
                })
            }
        }, 30))
        observer.observe(document.querySelector('#blessing-preheat'), {childList: true, subtree: true})
    }

    initNav = (isFormal) => {
        const {navs} = this.state
        if (isFormal) {
            this.setState({
                navs: navs.filter(item => item.id !== 'deposit')
            })
        }
    }

    fetchMoudleId = (str) => {
        const {navs} = this.state
        return findIndex(navs, item => item.id === str)
    }

    fetchUserBlessing() {
        Toast.info('fetchUserBlessing', 2)

        const {userInfo} = this.state;
        http.get(`${API.home}/sys/user/blessing`).then(res => {
            const {code, data} = res.data
            if (code === 200) {
                this.setState({
                    isSign: !!data.today_signed,
                    isFormal: data.is_activity,
                    userInfo: Object.assign({}, userInfo, {
                        isFollow: data.subscribed,
                        blessingVal: data.user_blessing_value,
                        buyBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.buy_course) ? data.types_total_blessing_value.buy_course : 0,
                        inviteBlessing: (data.types_total_blessing_value && data.types_total_blessing_value.invite) ? data.types_total_blessing_value.invite : 0,
                    })
                })
                if (data.is_login === 1) {
                    this.handleToSign()
                }
                this.initNav(data.is_activity)
            }
        })
    }

    handleToSign = () => {
        http.post(`${API.home}/sys/add/blessing`, {
            type: 1 // 1：签到；3：分享；4：浏览课程；
        }).then(res => {
            const {code} = res.data
            if (code === 200) {
                this.setState({
                    isSign: true,
                })
                Toast.info('+5点福气值~', 2, null, false)
            }
        })
    }

    handleToHide = (key) => {
        let obj = {}
        obj[key] = false
        this.setState({
            ...obj
        })
    }

    handleToShow = (key, isLogin = false) => {
        // 需要用户登录 并且用户未登录
        const isLoginnew = !this.props.user.hasError

        if (isLogin && isLoginnew) {
            this.toLogin()
        } else {
            let obj = {}
            obj[key] = true
            this.setState({
                ...obj
            })
        }
    }

    // 邀请好友注册
    handleToShowInvite = () => {
        const isLogin = !this.props.user.hasError
        if (isLogin) {
            if (!getParam('version')) {
                QRCode.toDataURL(`${API.m}/invite`, {
                    width: 120,
                    height: 120,
                    margin: 1
                })
                    .then(url => {
                        this.setState({
                            inviteUrl: url,
                            inviteVisible: true
                        })
                    })
                    .catch(err => {
                        console.error(err)
                    })
            } else {
                let data = {
                    title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
                    desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
                    link: 'https://m.julyedu.com/blessingPreheat',
                    imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
                }
                SendMessageToApp("toShare", data)
            }
        } else {
            this.toLogin();
        }
    }

    handleToShowNotice = () => {
        http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
            const {errno, data} = res.data
            if (errno === 200) {
                QRCode.toDataURL(data.url, {
                    width: 120,
                    height: 120,
                    margin: 1
                }).then(url => {
                    this.setState({
                        isServer: true,
                        serverUrl: url,
                    })
                })
                    .catch(err => {
                        console.error(err)
                    })
            } else if (errno === 4030 || errno === 4040) {
                this.toLogin()
            }
        })
    }

    toLogin = () => {
        const {history} = this.props
        if (!getParam('version')) {
            history.push('/passport')
        } else {
            SendMessageToApp("toLogin")
        }
    }

    onCopy = () => {
        Toast.info('复制成功', 2, null, false)
    }

    toSection = (i, e) => {
        const {navs} = this.state
        e.preventDefault()
        let top = document.querySelector(`#${navs[i].id}`).offsetTop
        this.setState({
            index: i
        })
        window.scrollTo({
            top: top - 60,
            left: 0
        })
    }

    calcNavActive = () => {
        const {navs, index} = this.state
        const y = window.scrollY
        let swipeDirection = y > this.prevY ? 'up' : 'down'
        let _index
        if (swipeDirection === 'up') {
            _index = (index + 1) >= navs.length ? index : index + 1

        } else {
            _index = (index - 1) <= 0 ? 0 : index - 1
        }
        let el = document.querySelector(`#${navs[_index].id}`)
        let nav = document.querySelector('#main-nav')
        if (el) {

            let top = el.offsetTop

            if (y <= this.navTop) {
                nav.classList.remove('fixed')
            } else {
                !nav.classList.contains('fixed') && nav.classList.add('fixed')
            }

            if (swipeDirection === 'up') {
                if (y + 30 + 30 >= top) {
                    this.setState({
                        index: _index
                    })
                }
            } else {
                if (y + 30 + 20 <= top) {
                    this.setState({
                        index: _index
                    })
                }
            }
            this.prevY = y
        }
    }

    render() {
        const {
            navs,
            userInfo,
            isRule,
            isCourse,
            inviteUrl,
            inviteVisible,
            isFormal,
            isServer,
            serverUrl,
            isSign,
            showRecordList,
            shareMark,
            index
        } = this.state;
        const {history} = this.props;
        const isLogin = !this.props.user.hasError
        return (
            <div id={'blessing-preheat'}>
                <Banner
                    isFormal={isFormal}
                    navs={navs}
                    toSection={this.toSection}
                    index={index}
                />

                {/* 积福气 */}
                <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}}/>
                <Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
                <CollectBlessing
                    isSign={isSign}
                    userInfo={userInfo}
                    isLogin={isLogin}
                    history={this.props.history}
                    toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
                    handleToShowList={() => this.handleToShow('isCourse')}
                    handleToShowInvite={this.handleToShowInvite}
                    handleToShowNotice={this.handleToShowNotice}
                    handleToShow={this.handleToShow}
                    toLogin={this.toLogin}
                    handleToShowShare={() => this.handleToShow('shareMark')}
                    handleToHideShare={() => this.handleToHide('shareMark')}
                />

                {/* 幸运大抽奖--预热 */}
                <ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}}/>
                <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
                <button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
                <LuckDraw/>

                {/*定金--只在预热期间显示*/}
                {
                    isFormal === 0 &&
                    <>
                        <ListHeader id={'deposit'} text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}}/>
                        <ReserveCourse/>
                    </>
                }

                {/* 精品课程特惠专区 */}
                <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
                <CourseList
                    isFormal={isFormal}
                    isLogin={isLogin}
                    history={this.props.history}
                    toLogin={this.toLogin}
                />

                {
                    isRule &&
                    <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
                }
                {
                    isCourse &&
                    <CoursePopup toLogin={this.toLogin} history={history} isLogin={isLogin}
                                 handleToHide={() => this.handleToHide('isCourse')}/>
                }
                {
                    showRecordList &&
                    <RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
                }
                {
                    shareMark &&
                    <SharePopup/>
                }
                <Popup
                    visible={inviteVisible}
                    title={'扫码邀请好友注册+10点福气值'}
                    className={'invite-popup'}
                >
                    <img src={inviteUrl} alt="barcode" className="qr-code"/>
                    <CopyToClipboard text={`${API.m}/invite"`} onCopy={this.onCopy}>
                        <button>一键复制网址</button>
                    </CopyToClipboard>
                </Popup>
                <Popup
                    visible={isServer}
                    title="扫码关注“七月在线”服务号"
                    className={'invite-popup'}
                >
                    <img src={serverUrl} alt="barcode" className="qr-code"/>
                </Popup>

                <Popup visible={this.state.joinLotteryVisible}
                       title={'你已成功参与本时段抽奖'}
                       className={'join-lottery'}
                >
                    <div className="text">
                        <div className="code">抽奖码为：99999999</div>
                        <div className="time">本时段的中奖结果将在xx:xx公布</div>
                        <div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
                        <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png"
                             className='qr-code' alt=""/>
                    </div>

                    <button onClick={() => {
                        this.setState({joinLottery: false})
                    }}>知道了
                    </button>
                </Popup>
                <Popup title={'微信扫码分享到微信朋友圈'}
                       visible={this.state.timelineShareVisible}
                       className={'timeline-share'}
                >
                    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt=""
                         className="qr-code"/>
                </Popup>


                <ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}}/>

                <div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
                    测试记录>
                </div>
                <LevelTest history={history} isLogin={isLogin} toLogin={this.toLogin}></LevelTest>


                <RankList></RankList>

                <Live isFormal={isFormal}></Live>
            </div>
        )
    }
}

export default compose(
    connect(
        state => ({user: state.user}),
        {setCurrentUser, startFetchUser}
    )
)(BlessingPreheat)