import React, { useState, useMemo, useEffect } from 'react';
import { localUrl } from 'cbkfe-utils';
import Swiper from '../GrouponSwiper';
import ProductionInfo from '../ProductInfo';
import PurchaseNotes from '../PurchaseNotes';
import Disclaimer from '../Disclaimer';
import ProductInfoModel from '../model/ProductModel';
import LimitContext from '../LimitContext';
import PackageContent from '../PackageContent';
import CommonHeader from '../CommonHeader';
import PackageList from '../PackageList';
import ExperiencerCard from '../ExperiencerCard';
import FitStoreCard from '../FitStoreCard';
import RecommendLike from '../RecommendLike';
import RuleModel from '../model/RuleModel';
import ContextModel from '../model/ContextModel';
import { mb_open } from 'cbkfe-bridge';
import { isArray, isObject, queryCode } from 'cbkfe-utils';
import './style';
import { gt, setGlobalParams } from '../track';

function RenderSwiper({ swiperImages = [], swiperModel = null }) {
    const [_swiperImages, updateSwiperImages] = useState(swiperImages);
    const [_swiperKey, updateKey] = useState(1);
    useEffect(() => {
        if (swiperImages !== _swiperImages && isArray(swiperImages, true)) {
            updateSwiperImages(swiperImages);
            updateKey(_swiperKey => _swiperKey + 1);
        }
    }, [swiperImages, _swiperImages, _swiperKey]);
    return useMemo(() => {
        return isArray(_swiperImages, true) ? <div key={_swiperKey}><Swiper showModal={!!swiperModel} images={_swiperImages} >{swiperModel || null}</Swiper></div> : null;
    }, [_swiperImages, _swiperKey, swiperModel]);
}


function RenderProductInfo({ productInfo = {}, onDateClick, insertPriceArea }) {
    const [info, updateInfo] = useState(productInfo);
    useEffect(() => {
        productInfo !== info && updateInfo(productInfo);
    }, [productInfo, info]);
    return useMemo(() => {
        if (!isObject(info, true)) {
            return null;
        }
        const _productInfo = new ProductInfoModel().mapping(info);
        const _ruleModel = new RuleModel().mapping(info);

        return <ProductionInfo
            insertPriceArea={insertPriceArea}
            onDateClick={onDateClick}
            ruleModel={_ruleModel}
            isOneGroupon={Number(_productInfo.groupNumber) === 1}
            info={_productInfo}
        />;
    }, [info, insertPriceArea, onDateClick]);
}

function RenderPackageContent({ productInfo = {} }) {
    const [_productInfo, updateProductInfo] = useState(productInfo);
    useEffect(() => {
        productInfo !== _productInfo && updateProductInfo(productInfo);
    }, [_productInfo, productInfo]);
    return useMemo(() => {
        if (!isObject(_productInfo, true)) { return null; }
        const renderInfo = new ProductInfoModel().mapping(_productInfo);
        return <div {...gt('gbdetail_gds_setcont_pv')}><PackageContent info={renderInfo} /> </div>;
    }, [_productInfo]);
}

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 <LimitContext limitContext={renderInfo.limitContext} html={renderInfo.description} padding={15} />;
    }, [_description]);
}

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>
            <div {...gt('gbdetail_buy_nk_pv')}><PurchaseNotes notes={renderInfo} /></div>
            {/** 免责说明 */}
            {<Disclaimer notes={renderInfo.disclaimerThat} />}
        </React.Fragment>;
    }, [_purchaseNotes]);
}

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

    return useMemo(() => {
        return isObject(_travelRecommend, true) && isArray(_travelRecommend.travels, true)
            ? <div {...gt('gbdetail_ugc_pv')} className="grouponTemp-experiencer-container">
                <CommonHeader
                    classname="experiencer-header-class"
                    title="体验师推荐"
                    rightText={<span {...gt('gbdetail_ugc_modul_pv,gbdetail_ugc_modul_click')}>查看全部</span>}
                    num={_travelRecommend.travelNumber}
                    handleClick={() => {
                        location.href = _travelRecommend.url;
                        return;
                    }}
                />
                <ExperiencerCard
                    onItemEach={(item, index) => {
                        let { shopId } = _currentShop;
                        return {
                            itemProps: gt(`gbdetail_ugc_lone_pv,gbdetail_ugc_lone_click/${shopId}/${index}`),
                            collectProps: gt(`gbdetail_ugc_loneal_click/${shopId}/${index}`),
                            likeProps: gt(`gbdetail_ugc_loneli_click/${shopId}/${index}`)
                        };
                    }}
                    randomCount={Math.random()}
                    data={_travelRecommend.travels}
                    hasLogin={hasLogin} />
            </div>
            : null;
    }, [_currentShop, _travelRecommend, hasLogin]);
}

function RenderSuitStore({ suitStore, itemId, 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(() => {
        const { shopId } = _suitStore.currentStore || {};
        return isObject(_suitStore, true)
            ? <section {...gt(`gbdetail_poi_pv/${shopId}`)} className="grouponTemp-fitstore-container">
                <CommonHeader
                    classname="fitstore-header"
                    title="适用门店"
                    rightText={_suitStore.storeNumber > 1 && <span {...gt(`gbdetail_poi_detail_pv,gbdetail_poi_detail_click/${shopId}`)}>查看全部</span>}
                    num={_suitStore.storeNumber}
                    handleClick={() => {
                        _suitStore.storeNumber > 1 && mb_open(_suitStore.linkUrl || localUrl.url(`/ts/groupon/fitStoreList?itemId=${itemId}&itemCode=${queryCode('itemCode')}&type=${type}`));
                    }}
                    {...headerConfig}
                />
                <div {...gt(`gbdetail_poi_modul_click/${shopId}`)}>
                    <FitStoreCard
                        carProps={{
                            phoneProps: gt(`gbdetail_store_poiph_pv,gbdetail_store_poiph_click/${shopId}`)
                        }}
                        data={_suitStore.currentStore} />
                </div>

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

function RenderRecommendLike({ grouponRecommends }) {
    const [_grouponRecommends, setGrouponRecommends] = useState(grouponRecommends);
    useEffect(() => {
        if (_grouponRecommends !== grouponRecommends && isObject(grouponRecommends, true)) {
            setGrouponRecommends(grouponRecommends);
        }
    }, [_grouponRecommends, grouponRecommends]);
    return useMemo(() => {
        return isObject(_grouponRecommends, true)
            ? <div {...gt('gbdetail_mayli_pv')}>
                <RecommendLike
                    onItemEach={(item, index) => {
                        return {
                            cellprops: gt(`gbdetail_mayli_cell_pv,gbdetail_mayli_cell_click/${item.bizType}/${index}`)
                        };
                    }}
                    option={{
                        title: '你可能还会喜欢',
                        className: 'recommend-container',
                        itemList: _grouponRecommends.recommendItems
                    }} />
            </div>
            : null;
    }, [_grouponRecommends]);
}

function BussinseCooperation({ businessCooperation }) {
    return !businessCooperation && <div {...gt('gbdetail_bcoo_pv,gbdetail_bcoo_click')}
        onClick={() => mb_open(localUrl.url('/ms/user/sponsor/joinus'))}
        className="grouponTemp-business-cooper iconfont">
        我是商家，想跟彩贝壳合作
    </div>;
}


function grouponTemplate({
    itemId,
    swiperModel, // 是否渲染轮播的最后一页
    baseInfo,
    description, // 图文详情以及相关文案信息
    travelRecommend, // 体验师推荐
    suitStore = {},
    hasLogin,
    grouponRecommends,
    businessCooperation,
    insertComponent,
    insertPriceArea, // 定制价格区域
    globalTrack = {}, // 全局打点参数
    onDateClick = function () { }, // 可约日历点击事件
    packageListConfig = {}
}) {
    setGlobalParams({
        type: baseInfo.packageType === 'food' ? 1 : 2,
        item_id: itemId,
        url_item_id: queryCode('itemCode')
    }, globalTrack);
    const compoennts = {
        swiper: <RenderSwiper swiperModel={swiperModel} swiperImages={baseInfo.imageUrls} />,
        productInfo: <RenderProductInfo insertPriceArea={insertPriceArea} productInfo={baseInfo} onDateClick={onDateClick} />,
        packageContent: <RenderPackageContent productInfo={baseInfo} />,  // /** 拼团套餐-菜单 */
        packageList: <PackageList {...packageListConfig} />, // 多套餐列表
        experiencer: <RenderExperiencer currentShop={suitStore.currentShop} travelRecommend={travelRecommend} hasLogin={hasLogin} />, // /** 体验师推荐 */
        description: <RenderDescription description={description} />, // {/** 图文详情 购买须知 */} 
        suitStore: <RenderSuitStore suitStore={suitStore} packageType={baseInfo.packageType} itemId={itemId} />, // /** 适用门店 */
        purchaseNote: <RenderPurchaseNotes purchaseNotes={description} />, // /** 购买须知 */
        bussinse: <BussinseCooperation businessCooperation={businessCooperation} />, // 商家合作
        recommendLike: <RenderRecommendLike grouponRecommends={grouponRecommends} />, // /** 你可能还会喜欢 */
    };
    return <React.Fragment>
        {Object.keys(compoennts).map((key) => {
            let before = null;
            let after = null;
            if (insertComponent && typeof insertComponent === 'function') {
                insertComponent(key, _before => {
                    before = _before;
                }, _after => {
                    after = _after;
                });
            }
            return <React.Fragment key={key}>{before}{compoennts[key]}{after}</React.Fragment>;
        })}
    </React.Fragment>;
}

grouponTemplate.RenderSuitStore = RenderSuitStore;


export default grouponTemplate;