/* eslint-disable complexity */
import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
import { Swiper, Context, StackBlurImg, Button, AnchorNavView } from 'cbkfe-ui';
import ProductInfoCard from '../ProductInfoCard';
import CardPackages from '../CardPackages';
import LiveActivityEntry from '../LiveActivityEntry';
import PurchaseNotes from '../PurchaseNotes';
import Disclaimer from '../Disclaimer';
import CommonHeader from '../CommonHeader';
import ExperiencerCard from '../ExperiencerCard';
import FitStoreCard from '../FitStoreCard';
import RecommendLike from '../RecommendLike';
import CpsModules from '../CpsModules';
import ContextModel from '../model/ContextModel';
import RegularLabels from '../RegularLabels';
import CoopreationEntry from '../CoopreationEntry';
import PackageCountList from '../PackageCountList';
import RenderFooterBar from '../MultiCardFooterBar';
import { mb_open, mb_fullScreen } from 'cbkfe-bridge';
import { isArray, isObject, queryCode, browser, preloadImage, localUrl, objectToParams, throttle } from 'cbkfe-utils';
import './style';
import CBKEmitter from '../events';

const params = queryCode();
const isAndroid = browser.versions.android;
const isWechat = browser.versions.wechat;
const isApp = browser.parseUA.isApp;
const isCps = queryCode('strategyType') === 'cps';
// 定义锚点的名称
const PACKAGE_ANCHOR = '套餐';
function remToPx(int) {
    let rem = (window.screen.availWidth > 800 ? 800 : window.screen.availWidth) / 18.75;
    return int * rem;
}

function RenderSwiper({ swiperImages = [] }) {
    const defaultBack = 'https://static.caibeike.com/i/40080ecbf25f8bf9c9a9e8439d986370-ioaKE0-bbACwekChp1';
    const [_swiperImages, updateSwiperImages] = useState(swiperImages);
    const [_swiperKey, updateKey] = useState(1);
    const [showSwiper, setShowSwiper] = useState(false);
    useEffect(() => {
        if (swiperImages !== _swiperImages && isArray(swiperImages, true)) {
            updateSwiperImages(swiperImages);
            updateKey(_swiperKey => _swiperKey + 1);
        }
    }, [swiperImages, _swiperImages, _swiperKey]);

    useEffect(() => {
        showSwiper && isArray(_swiperImages, true) && new Swiper({
            selector: '.productInfo-card-swiper',
            pagination: true,
            paginationClassName: 'productInfo-card-pagination'
        });
    }, [_swiperImages, showSwiper]);

    return useMemo(() => {
        if (!isArray(_swiperImages, true)) {
            return null;
        }
        return <div className="productInfo-card-container">
            <div className="productInfo-card-StackBlurImg">
                <StackBlurImg
                    url={_swiperImages[0]}
                    size="@!sn1080"
                    position="bottom"
                    height={remToPx(11.4)}
                    onLoadEnd={() => {
                        preloadImage([_swiperImages[0]], {
                            unload: true,
                            success: () => {
                                setShowSwiper(true);
                                setTimeout(() => {
                                    document.querySelector('.productInfo-card-StackBlurImg').style.display = 'none';
                                }, 100);
                            }
                        });

                    }}
                />
            </div>
            {isArray(_swiperImages, true) ? <div key={_swiperKey} className="productInfo-card-swiper">
                {_swiperImages.map((img, index) => <img className="card-swiper-item" src={img} key={index} />)}
            </div> : <img src={defaultBack} className="productInfo-card-background" />}
        </div>;

    }, [_swiperImages, _swiperKey]);
}


function RenderDescription({ description }) {
    const [_description, setDescription] = useState(description);
    useEffect(() => {
        _description !== description && setDescription(description);
    }, [description, _description]);
    return useMemo(() => {
        if (!isObject(_description, true) || !_description.description) { return null }
        const renderInfo = new ContextModel().mapping(_description);
        return <div data-anchor="图文详情" className="productInfo-card-context cardTemp-anchor">
            <CommonHeader title="图文详情" classname="card-context-header" />
            <Context perLimit={renderInfo.limitContext} html={renderInfo.description} padding={15} />
        </div>;
    }, [_description]);
}


function RenderRegularLabels(info) {

    return <div className="cbk-rule">

        <RegularLabels
            showSafeguard={info.saleRuleDTO.consumerProtection}
            ruleModel={info.saleRuleDTO}
            labels={info.saleRules}
        />
    </div>;
}

function RenderPurchaseNotes({ purchaseNotes }) {
    const [_purchaseNotes, setPurchaseNotes] = useState(purchaseNotes);
    useEffect(() => {
        purchaseNotes !== _purchaseNotes && setPurchaseNotes(purchaseNotes);
    }, [_purchaseNotes, purchaseNotes]);
    return useMemo(() => {
        if (!isObject(_purchaseNotes, true)) { return null }
        // const renderInfo = new ContextModel().mapping(_purchaseNotes);
        return <React.Fragment>
            {/** 购买须知 */}
            <PurchaseNotes
                className="cardTemp-anchor"
                props={{ 'data-anchor': '购买须知' }}
                {..._purchaseNotes}
            />

            {/** 免责说明 */}
            <Disclaimer attrs={{ 'data-anchor': '免责说明' }} className="cardTemp-anchor" notes={_purchaseNotes.disclaimerThat} />
        </React.Fragment>;
    }, [_purchaseNotes]);
}

function RenderExperiencer({ travelRecommend, hasLogin }) {
    const [_travelRecommend, setTravelRecommend] = useState(travelRecommend);
    useEffect(() => {
        _travelRecommend !== travelRecommend && setTravelRecommend(travelRecommend);
    }, [_travelRecommend, travelRecommend]);

    return useMemo(() => {
        return isObject(_travelRecommend, true) && isArray(_travelRecommend.travels, true)
            ? <div data-anchor="体验师推荐"
                className="grouponTemp-experiencer-container cardTemp-anchor">
                <CommonHeader
                    classname="experiencer-header-class"
                    title="体验师推荐"
                    rightText={<span
                        dot-event-name="spk_page_expmor_click"
                        dot-pv-name="spk_page_expmor_pv"
                        data-item_id={queryCode('dealCode')}
                    >
                        查看全部</span>}
                    num={_travelRecommend.travelNumber}
                    handleClick={() => {
                        location.href = _travelRecommend.url;
                        return;
                    }}
                />
                <div
                    dot-event-name="spk_page_exp_click"
                    dot-pv-name="spk_page_exp_pv"
                    data-item_id={queryCode('dealCode')}>
                    <ExperiencerCard
                        randomCount={Math.random()}
                        data={_travelRecommend.travels}
                        hasLogin={hasLogin}
                    />
                </div>
            </div>
            : null;
    }, [_travelRecommend, hasLogin]);
}

function RenderSuitStore({ suitStore, packageType, headerConfig = {} }) {
    const computedType = (packageType) => {
        if (!packageType) { return -1 }
        return packageType === 'food' ? 1 : 2;
    };
    const [_suitStore, setSuitStore] = useState(suitStore);
    const [type, setType] = useState(computedType(packageType));
    useEffect(() => {
        suitStore !== _suitStore && setSuitStore(suitStore);
        packageType && type < 0 && setType(computedType(packageType));
    }, [_suitStore, packageType, suitStore, type]);
    return useMemo(() => {
        return isObject(_suitStore, true)
            ? <section className="grouponTemp-fitstore-container cardTemp-anchor" data-anchor="适用门店">
                <CommonHeader
                    classname="fitstore-header"
                    title="适用门店"
                    rightText={_suitStore.storeNumber > 1 && <span>查看全部</span>}
                    num={_suitStore.storeNumber}
                    handleClick={() => {
                        _suitStore.storeNumber > 1 && mb_open(_suitStore.linkUrl);
                    }}
                    {...headerConfig}
                />
                <FitStoreCard data={_suitStore.currentStore} />

            </section>
            : null;
    }, [_suitStore, headerConfig]);
}

function RenderRecommendLike({ grouponRecommends }) {
    const [_grouponRecommends, setGrouponRecommends] = useState(grouponRecommends);
    useEffect(() => {
        if (_grouponRecommends !== grouponRecommends && isObject(grouponRecommends, true)) {
            setGrouponRecommends(grouponRecommends);
        }
    }, [_grouponRecommends, grouponRecommends]);
    return useMemo(() => {
        return (_grouponRecommends && isArray(_grouponRecommends.recommendItems, true))
            ? <div
                dot-event-name="spk_page_mayb_click"
                dot-pv-name="spk_page_mayb_pv"
                data-item_id={queryCode('dealCode')}
                className="cardTemp-anchor" data-anchor="你可能还喜欢"><RecommendLike
                    option={{
                        title: '你可能还会喜欢',
                        className: 'recommend-container',
                        itemList: _grouponRecommends.recommendItems
                    }}
                /></div>
            : null;
    }, [_grouponRecommends]);
}

function BussinseCooperation({ businessCooperation, value }) {
    return businessCooperation ? <div
        // onClick={() => location.href = localUrl.url('/ms/user/sponsor/joinus')}
        onClick={() => mb_open(localUrl.url('/ms/user/sponsor/joinus'))}
        className="cardTemp-business-cooper"
    >
        {value || '我是商家，想跟彩贝壳合作'}
        <i className="iconfont icon--arrow" />
    </div>
        :
        <CoopreationEntry />;
}

function UseRuleBar({ description }) {
    if (!description || !description.userRuleConfig) {
        return null;
    }
    return <div onClick={() => mb_open(localUrl.url(`/h5/product/rules/use/other?${objectToParams(params)}`))} className="cardTemp-useRule">
        <div className="cardTemp-useRule-content">
            <img className="cardTemp-useRule__img" src="https://static.caibeike.com/i/f240c39488eb0a7738ec93c27b4a680c-J9Y3S7-AkwAOhp1" />
            <span className="cardTemp-useRule__text" >使用规则</span>
            <i className="iconfont icon--arrow" />
        </div>
    </div>;
}

function RenderNavBar({ baseInfo }) {
    const { initNavBar } = baseInfo;
    const [navItems, setNavItems] = useState([]);
    const globalNavItems = useRef([]);

    const initNav = useCallback((anchors) => {
        let navItems = Array.from(anchors).reduce((result, anchor) => {
            result.push(anchor.dataset.anchor);
            return result;
        }, []);
        // setNavItems(navItems);
        return navItems;
    }, []);

    const checkAndInitNavItems = useCallback(() => {
        let anchors = document.querySelectorAll('.cardTemp-anchor');
        const currNavItems = initNav(anchors);
        if (globalNavItems.current.toString() !== currNavItems.toString()) {
            globalNavItems.current = currNavItems;
            setNavItems(currNavItems);
        }
        anchors = null;
    }, [initNav]);

    useEffect(() => {
        if (!initNavBar && !isArray(navItems, true)) {
            checkAndInitNavItems();
        }
        // initNavBar 用来保证组件只初始化一次
        if (isArray(navItems, true) && initNavBar) {
            const initNavView = (innerBarHeight) => {
                const defaultBarHeight = isAndroid ? 74 : 64;
                const barHeight = innerBarHeight || defaultBarHeight;
                const instance = new AnchorNavView({
                    nav: '.cardTemp-navBar',
                    activeClass: 'cardTemp-navBar-item--active',
                    anchor: '.cardTemp-anchor',
                    changeIndexTime: 300,
                    dynamic: true,
                    navTop: isApp ? barHeight : 0,
                    navHeight: isApp ? barHeight + 44 : 44,
                    autoStyle: true,
                    // moveOver1px: true
                });

                // 这个代码别删，这个方法是别的组件可能需要手动触发锚点滚动用的，由于Nav初始化条件有点苛刻，导致这个在初始化未完成之前不奏效，
                // 后期优化
                // CBKEmitter.addListener('cardTempAnchorMove', (key, index) => {
                //     let _index = navItems.indexOf(key);
                //     if (typeof index === 'number') { // 优先使用index
                //         _index = index;
                //     }
                //     if (_index >= 0) {
                //         //微信35 app43
                //         const topPX = isWechat ? 35 : 43; //在微信环境中
                //         instance.$anchor.scrollAnchorByIndex(_index, undefined, topPX);
                //     } else {
                //         console.error('滑动异常, 请检查入参', key, index, navItems);
                //     }
                // });
            };
            isApp ? mb_fullScreen({
                isFull: true, interval: 0, success: (result) => {
                    initNavView(result && result.barHeight || 0);
                }
            }) : initNavView();

        }
    }, [navItems, checkAndInitNavItems, initNavBar]);

    useEffect(() => {
        let showHeight = 0;
        let navBar = null;
        let isShow = false;
        const showNavBar = () => {
            if (isShow) { return }
            if (!navBar) { navBar = document.querySelector('.cardTemp-navBar') }
            navBar && navBar.classList.add('cardTemp-navBar--show');
            isShow = true;
        };

        const hiddenNavBar = () => {
            if (!isShow) { return false }
            navBar && navBar.classList.remove('cardTemp-navBar--show');
            isShow = false;
        };

        if (initNavBar) {
            checkAndInitNavItems();
        }

        let isUpdateShowHeight = true;

        const onScroll = throttle(() => {
            // 前三秒每次滚动计算showHeight， 为了保证渲染延迟
            if (isUpdateShowHeight) {
                let anchors = document.querySelectorAll('.cardTemp-anchor'); // 默认取锚点的第一个
                let startDom = anchors[0];
                showHeight = startDom ? startDom.offsetTop : 0;
                anchors = null;
            }

            checkAndInitNavItems(); // 滚动过程中对比NavItems，如果改变则更新

            let scrollTop = window.scrollY || document.scrollTop || 0;
            scrollTop >= showHeight ? showNavBar() : hiddenNavBar(); // 滚动的距离大于锚点距离顶部的距离，就出现navbar

            setTimeout(() => {
                isUpdateShowHeight = false;
            }, 3000);
        }, 100);
        setTimeout(() => {
            window.addEventListener('scroll', onScroll);
        }, 100);
        return () => {
            window.removeEventListener('scroll', onScroll);
        };
    }, []);
    return useMemo(() => {
        if (!isArray(navItems, true)) {
            return null;
        }
        // opacity 是为了保证initNavBar在初始化之前样式不会太丑陋
        return <div style={{ opacity: initNavBar ? 1 : 0 }} className="cardTemp-navBar">
            <div className="cardTemp-navBar-wrapper">
                {navItems.map(item => <span key={item} className="cardTemp-navBar-item"><span className="cardTemp-navBar-text">{item}</span></span>)}
            </div>
        </div>;
    }, [navItems, initNavBar]);
}

function GrouponTemplate({
    itemId,
    baseInfo,
    description, // 图文详情以及相关文案信息
    travelRecommend, // 体验师推荐
    suitStore = {},
    hasLogin,
    grouponRecommends,
    businessCooperation,
    defaultShowPackage,
    cpsInfo,
    barHeight,
    isInMiniPro,
    soldInfo,
}) {
    const activityAdvert = baseInfo && baseInfo.activityAdvert || null;
    const [selectedCount, updateSelectedCount] = useState(null);
    const [cityModalVisible, setCityModalVisible] = useState(false);
    const [cityModalVisibleBack, setCityModalVisibleBack] = useState(false);

    const closeCardTemplatePackages = (visible) => {
        if (visible) {
            setCityModalVisible(visible);
            setCityModalVisibleBack(visible);
            return;
        }

        setCityModalVisible(visible);
        setTimeout(() => {
            setCityModalVisibleBack(visible);
        }, 200);
    };
    useEffect(() => {
        // 这个是为了在选择城市的时候把后面的组件也罩起来，因为选择城市组件只能罩自己
        CBKEmitter.addListener('cardTemplatePackagesVisibleChange', (visible) => {
            closeCardTemplatePackages(visible);
        });
    }, []);

    const onBackGroundClick = function () {
        CBKEmitter.emit('closePackagesBack');
        closeCardTemplatePackages(false);
    };

    return <div className="cbkfe-template-cardTemp">
        <RenderNavBar baseInfo={baseInfo} />
        {(isCps && cpsInfo && cpsInfo.distributor) && <CpsModules.Barrage barHeight={barHeight} />}
        <RenderSwiper swiperImages={baseInfo.imageUrls} />
        <ProductInfoCard selectedCount={selectedCount} soldInfo={soldInfo} cpsInfo={cpsInfo} info={baseInfo} />
        <PackageCountList defaultIndex={0} justScroll={true} onChange={(item) => {
            updateSelectedCount(item);
        }} className="cardTemp-countList" hideOne={true} list={soldInfo && soldInfo.multiCardDetails}
        />

        {/** 退改规则 ,将退改规则放进ProductInfoCard组件中 */}
        {/* {isObject(baseInfo.saleRuleDTO, true) && RenderRegularLabels(baseInfo)} */}
        {isObject(activityAdvert, true) && <LiveActivityEntry className="cbkfe-template-live" info={activityAdvert} />}
        {
            isArray(baseInfo.dealPackages, true) && <div >
                <CardPackages
                    anchorName={PACKAGE_ANCHOR}
                    shareModel={baseInfo.shareModel}
                    itemSpuCode={defaultShowPackage}
                    title={isObject(selectedCount, true) ? `以下${baseInfo.itemPackagesTypeDesc}任选${selectedCount.selectM}` : baseInfo.itemPackagesTitle}
                    storeNum={baseInfo.storeNum}
                    storeNumDesc={baseInfo.storeNumDesc}
                    list={baseInfo.dealPackages}
                    dealPackageCount={baseInfo.dealPackageCount}
                    itemPackagesTypeDesc={baseInfo.itemPackagesTypeDesc}
                    combineType={baseInfo.combineType}
                    selectedCount={selectedCount}
                    cityList={baseInfo.cityList}
                    grouonNo={baseInfo.grouonNo}
                />
            </div>
        }

        <div onClick={onBackGroundClick} className={`cardTemp-background cardTemp-background${cityModalVisibleBack ? '--grayBack' : ''}`}>
            <div onClick={onBackGroundClick} className={`cardTemp-background-back cardTemp-background-back--${cityModalVisible ? 'visible' : 'hidden'}`}></div>
            <RenderExperiencer travelRecommend={travelRecommend} hasLogin={hasLogin} />
            <RenderDescription description={description} />
            <RenderSuitStore suitStore={suitStore} packageType={baseInfo.packageType} itemId={itemId} />
            <RenderPurchaseNotes purchaseNotes={description} />
            <div style={{ marginTop: '0.5rem' }}>
                <UseRuleBar description={description} />
                <BussinseCooperation value={baseInfo.cooperationTip} businessCooperation={businessCooperation} />

            </div>
            <RenderRecommendLike grouponRecommends={grouponRecommends} />

            {!isCps && <RenderFooterBar selectedCount={selectedCount} data={soldInfo} />}
            {isCps && isObject(cpsInfo, true) && <CpsModules.FooterBar info={cpsInfo} />}
            {(!isInMiniPro
                && queryCode('isLive') !== '1'
                && isWechat
                && isObject(activityAdvert, true)
                && activityAdvert.autoOpenUrl
                && performance.navigation.type <= 1
            ) && <Button text="" bindId="auto-open-btn" openUrl={activityAdvert.autoOpenUrl} type="openApp" showConfirm={true} />}
            {/* </div>; */}
        </div>
    </div >;
}

GrouponTemplate.RenderSuitStore = RenderSuitStore;


export default GrouponTemplate;