import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import CommonHeader from '../CommonHeader';
import ProductInfo from '../ProductInfo';
import DIYCard from '../DIYCard';
import PackageContent from '../PackageContent';
import FitStoreCard from '../FitStoreCard';
import Disclaimer from '../Disclaimer';
import ExperiencerCard from '../ExperiencerCard';
import CpsModules from '../CpsModules';
import PurchaseNotes from '../PurchaseNotes';
import ContextModel from '../model/ContextModel';
import RenderFooterBar from '../MultiCardFooterBar';
import { Swiper, Label, Toast, Context, Basic, FullScreen } from 'cbkfe-ui';
import { mb_open, mb_share, setShare } from 'cbkfe-bridge';
import { isArray, isObject, browser, queryCode } from 'cbkfe-utils';
import { requestPackageInfo, requestDescription, requestTravelRecommend, requestProductStore, requestForFavor, requestSoldInfo, requestCpsSoldInfo, requestPurchaseNotes } from './action';
import './style';

const params = queryCode('') || {};
const isCps = queryCode('strategyType') === 'cps';

function RenderAppointBar({ info }) {
    let { firstCanAppointDay, appointText = '', useTimeTitle, combineStatus, appointType } = info;
    // appointType 1：在线预约；2：免预约；3：电话预约
    // combineStatus 0:正常。未过期且可约; 2: 已约满 3: 已过期
    let config = {};
    switch (appointType) {
        case 1: config = {
            icon: 'https://static.caibeike.com/i/1d202efedeb4d998a8d63c4366360f7d-PC4JmY-eeweehp1',
            title: '在线可约',
        }; break;
        case 2: config = {
            icon: 'https://static.caibeike.com/i/ae84aa03c86727ab82b237a751c220eb-jTDJn9-eeweehp1',
            title: <span style={{ color: '#22BE8E' }}>免预约</span>,
        }; break;
        case 3: config = {
            icon: 'https://static.caibeike.com/i/a7bf2b774aaebf81ada02db7e4da1879-DZ6c4U-eeweehp1',
            title: '电话预约'
        }; break;
    }
    return <div onClick={() => {
        info.appointLink && mb_open(info.appointLink);
    }} className="product-card-appoint">
        <img className="product-card-icon" src={config.icon} />
        <div className="product-card-info">
            <p className="product-card-appointDate">
                <span className="card-appointDate-title">{config.title}</span>
                <span className="card-appointDate-value" dangerouslySetInnerHTML={{ __html: firstCanAppointDay }}></span>
            </p>
            {useTimeTitle && <p className="product-card-validityDate">{useTimeTitle}</p>}

        </div>
        {appointText && <span className="card-appointDate-fullText">{appointText}</span>}
        {(appointType === 1 && !appointText) ? <span
            dot-event-name="spk_rpage_date_click"
            data-item_id={params.dealCode}
            data-item_code={params.itemSpuCode}
            className="product-card-appoint__arrowText">
            {combineStatus === 0 ? '可约日期' : ''}
            <i className="iconfont product-card-appoint__arrow"></i>
        </span> : null}
    </div>;

}

// 权益说明的样式
function PackageDescription({ title, list }) {
    return isArray(list, true) ? <div className="cbkfe-package-description">
        <div className="package-description-title">{title}</div>
        {list.map(item => <p key={item} className="package-description-li">· {item}</p>)}
    </div> : null;
}

// 暂时没有这个模块
function PackagePrivilege({ info }) {
    return <div className="cbkfe-package-pricilege">
        <CommonHeader classname="package-pricilege-title" title={info.brandTitle || ''} hideLine={true} label={info.packageSubTitle || ''} />
        <div className="package-pricilege-icons">
            <div className="package-pricilege-icon">
                <img className="package-pricilege-img" src="https://static.caibeike.com/i/3b0fc78f5ce0d03760167f8eafcb433a-uKclK0-iAwiAhp1" />
                <span className="package-pricilege-text">多人公用</span>
            </div>
            <div className="package-pricilege-icon">
                <img className="package-pricilege-img" src="https://static.caibeike.com/i/08b2663e6bb15f1e2ca6413f17eb7eb1-l0BQz9-iAwiAhp1" />
                <span className="package-pricilege-text">次数支持赠送</span>
            </div>
        </div>
        {/* <PackageDescription title="权益说明" list={info.packageContents || []} /> */}
    </div>;
}

// 菜单模块
function PackageMenu({ info, hideHeader }) {
    return <div>
        <PackageContent Header={hideHeader ? null : () => {
            return <CommonHeader title={info.packageTitle || ''} hideLine={true} label={info.packageSubTitle || ''} />;
        }} info={{
            packageType: info.packageType,
            infos: info.allPackageContents,
            comments: info.comments,
            type: 'vouchers'
        }}>
            {isArray(info.rightsComments, true) && <PackageDescription title="权益说明" list={info.rightsComments} />}
        </PackageContent>

    </div>;
}

const isWechat = browser.versions.wechat;
// 套餐顶部卡片
function PackageInfoCardDetail({ info }) {
    const cardDetail = info.cardDetail;
    if (!isObject(cardDetail, true)) {
        return null;
    }
    return <div className={`packageInfo-card-back packageInfo-card-back--${isWechat ? 'wechat' : ''}`}>
        <div className="packageInfo-card-detail">
            <p className="packageInfo-card-name">{cardDetail.cardTitle}</p>
            <div className="packageInfo-card-subInfo">
                <span className="packageInfo-card-subTitle">{cardDetail.cardSubTitle}</span>
                {cardDetail.storeNum && <Label
                    className="packageInfo-card-label"
                    bgColor="transparent"
                    borderRadius={['tl', 'tr', 'br']}
                    value={`${cardDetail.storeNum}家门店任选`}
                />}
            </div>
            <div className="packageInfo-card-price">
                {cardDetail.cardUrl && <div
                    onClick={() => { mb_open(cardDetail.cardUrl); }}
                    className="packageInfo-card-detailbtn">
                    卡片详情
                    <i className="iconfont icon--arrow"></i>
                </div>}

                <div className="card-price">
                    <span className="card-price-soldPrice">
                        <span className="card-price-unit">¥</span>{cardDetail.soldPrice}
                    </span>
                    <div className="card-price-labelMarket">
                        {cardDetail.groupNumber > 1 && <Label
                            value={`${cardDetail.groupNumber}人团`}
                            bgColor="transparent"
                            className="card-price-label"
                            borderRadius={['tl', 'tr', 'br']}
                        />}
                        <del className="card-price-del">¥{cardDetail.marketPrice}</del>
                    </div>
                </div>
            </div>
        </div>
    </div>;
}

function PackageInfoSwiper({ images }) {
    const [_images] = useState(images);

    useEffect(() => {
        isArray(_images, true) && _images.length > 1 && new Swiper({
            selector: '.packageInfo-swiper-wrapper',
            scale: 0.97,
            pagination: true,
            paginationClassName: 'packageInfo-swiper-pagination'
        });
    }, []);
    return useMemo(() => {
        if (!isArray(_images, true)) {
            return null;
        }
        return <div className="packageInfo-swiper-container">
            <div className="packageInfo-swiper-wrapper">
                {_images.map((img, index) => <div key={index} className="packageInfo-swiper-item" >
                    <img className="packageInfo-swiper-itemImg" src={img} />
                </div>)}
            </div>
        </div>;
    }, [_images]);
}

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 data-anchor="购买须知" className="cardTemp-anchor"><PurchaseNotes {...renderInfo || {}} /></div>
            {/** 免责说明 */}
            <div data-anchor="免责说明" className="cardTemp-anchor"><Disclaimer notes={renderInfo.disclaimerThat} /></div>
        </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
                dot-event-name="spk_rpage_exp_click"
                dot-pv-name="spk_rpage_exp_pv"
                data-item_id={params.dealCode}
                data-item_code={params.itemSpuCode}
                data-anchor="体验师推荐" className="grouponTemp-experiencer-container cardTemp-anchor">
                <CommonHeader
                    classname="experiencer-header-class"
                    title="体验师推荐"
                    rightText={<span
                        dot-event-name="spk_rpage_expmor_click"
                        dot-pv-name="spk_rpage_expmor_pv"
                        data-item_id={params.dealCode}
                        data-item_code={params.itemSpuCode}
                    >
                        查看全部</span>}
                    num={_travelRecommend.travelNumber}
                    handleClick={() => {
                        location.href = _travelRecommend.url;
                        return;
                    }}
                />
                <ExperiencerCard
                    randomCount={Math.random()}
                    data={_travelRecommend.travels}
                    hasLogin={hasLogin} />
            </div>
            : null;
    }, [_travelRecommend, hasLogin]);
}

function RenderSuitStore({ suitStore, headerConfig = {} }) {
    const [_suitStore, setSuitStore] = useState(suitStore);
    useEffect(() => {
        suitStore !== _suitStore && setSuitStore(suitStore);
    }, [_suitStore, suitStore]);
    return useMemo(() => {
        return isObject(_suitStore, true)
            ? <section className="grouponTemp-fitstore-container cardTemp-anchor">
                <CommonHeader
                    classname="fitstore-header"
                    title="适用门店"
                    rightText={_suitStore.storeNumber > 1 && <span
                        dot-pv-name="spk_rpage_shpmor_pv"
                        dot-event-name="spk_rpage_shpmor_click"
                        data-item_id={params.dealCode}
                        data-item_code={params.itemSpuCode}
                    >查看全部</span>}
                    num={_suitStore.storeNumber}
                    handleClick={() => {
                        _suitStore.storeNumber > 1 && mb_open(_suitStore.linkUrl);
                    }}
                    {...headerConfig}
                />
                <FitStoreCard carProps={{
                    product: {
                        'dot-event-name': 'spk_rpage_shp_click',
                        'dot-pv-name': 'spk_rpage_shp_pv',
                        'data-item_id': params.dealCode,
                        'data-item_code': params.itemSpuCode,
                        'data-shop_id': _suitStore.currentStore && _suitStore.currentStore.shopId || ''
                    }
                }} data={_suitStore.currentStore} />

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

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

function PackageInfo({ footerBar, description = {},
    cpsInfo = {}, info = {}, purchaseNotes = {},
    travelRecommend = {}, suitStore = {}, activityAdvert,
    soldInfo
}) {
    const showFooterBar = (isObject(footerBar, true) && isObject(soldInfo)) || (isCps && isObject(cpsInfo, true));
    const showImageUrls = isArray(info.imageUrls, true);
    return <div
        dot-pv-name="spk_rpage_pv"
        data-item_id={params.dealCode}
        data-item_code={params.itemSpuCode}
        className={`cbkfe-packageInfoCard cbkfe-packageInfoCard--${showImageUrls ? 'hasSwiper' : ''}`}>
        {isObject(info.cardDetail, true) && <DIYCard cardDetail={info.cardDetail} from="package" />}
        {/* <PackageInfoCardDetail priceInfo={footerBar} info={info} /> */}
        <div className={`cbkfe-packageInfoCard-content ${showFooterBar ? 'cbkfe-packageInfoCard-padding' : ''}`}>
            <div className="cbkfe-content-blank"></div>
            {showImageUrls && <PackageInfoSwiper images={info.imageUrls} />}
            <div className="cbkfe-packageInfoCard--topInfo">
                <ProductInfo info={{
                    ...{}, ...info, ...{
                        showCanAppointDay: false, //隐藏可约区域
                    }
                }} activityAdvert={activityAdvert} />
                <div className="packageInfo-product__appointBar">
                    <RenderAppointBar info={info} />
                </div>
            </div>
            <PackageMenu info={info} />
            <RenderSuitStore suitStore={suitStore} ></RenderSuitStore>
            <RenderExperiencer travelRecommend={travelRecommend} hasLogin={info.hasLogin} />
            <RenderDescription description={description} />
            <RenderPurchaseNotes purchaseNotes={purchaseNotes} />
        </div>
        {/* <RenderNavBar info={info} closeDetail={closeDetail} /> */}
        {isCps
            ? <CpsModules.FooterBar info={cpsInfo} />
            : (showFooterBar && <RenderFooterBar defaultId={params.defaultId} data={soldInfo} coverConfig={footerBar} hideQuickBtns={true} />)}
        <div className="iphonex" />
    </div>;
}

PackageInfo.RenderAppointBar = RenderAppointBar;
PackageInfo.PackageDescription = PackageDescription;
PackageInfo.PackagePrivilege = PackagePrivilege;


@FullScreen({
    isShowShare: false
})
class FullScreenPage extends React.Component {

    state = { isLoad: false, shareModel: null, collect: -1, initNav: false }
    static getDerivedStateFromProps = (nextProps) => ({
        isLoad: nextProps.options.isLoad,
        shareModel: nextProps.options.shareModel,
        collect: nextProps.options.collect
    });

    componentDidUpdate() {
        if (this.state.isLoad && !this.state.initNav) {
            this.initNavBar(this.state.collect);
        }
    }

    initNavBar = (collect) => {
        let { shareModel, initNav } = this.state;
        !initNav && this.setState({ initNav: true });
        const collentionReq = () => {
            requestForFavor({
                targetType: 'item',
                targetId: `deal:${params.strategyType}_${params.dealCode}_${params.itemSpuCode}`,
                action: collect ? 1 : 0
            }).then(() => {
                Toast.info(collect ? '取消收藏成功' : '收藏成功');
                this.initNavBar(!collect);
            }).catch(e => {
                console.log('--请求异常--', e);
            });
        };
        const collectIcon = {
            icon: collect ? 'collected' : 'collect',
            click: collentionReq,
            props: {
                'dot-event-name': 'spk_rpage_collec_click',
                'data-item_code': params.itemSpuCode,
                'data-item_id': params.dealCode
            }
        };
        const rightContent = [{
            icon: 'share',
            click: () => mb_share(shareModel),
            props: {
                'dot-event-name': 'spk_rpage_shar_click',
                'data-item_code': params.itemSpuCode,
                'data-item_id': params.dealCode
            }
        }];
        !isCps && rightContent.unshift(collectIcon);// 分销没有收藏功能
        this.HEADER('all').set({ rightContent });
    }

    render = () => this.props.children;
}

function PackageInfoContainer() {
    const [options, setOptions] = useState({
        pageTitle: '套餐详情',
        errorMessage: '',
        isLoad: false
    });
    const [footerBarInfo, setFooterBarInfo] = useState({}); // 底部button配置信息
    const [travelRecommend, setTravelRecommend] = useState(null);
    const [description, setDescription] = useState(null);
    const [packageSuiteStore, setPackageSuiteStore] = useState({}); // 套餐的门店信息
    const [info, setInfo] = useState({});
    const [cpsInfo, setCpsInfo] = useState({});
    const [activityAdvert, setActivityAdvert] = useState(null);
    const [soldInfo, setSoldInfo] = useState(null);

    useEffect(() => {
        let __info__ = null;
        if (!options.isLoad && !options.errorMessage) {
            requestPackageInfo(params).then((data) => {
                setInfo(data);
                __info__ = data;
                setOptions({ ...options, ...{ isLoad: true } });
                requestProductStore(params).then(setPackageSuiteStore).catch(e => { }).finally(() => {
                    browser.versions.wechat && setShare(__info__.shareModel); // 设置分享
                });
            }).catch(e => {
                setOptions({ ...options, ...{ errorMessage: e.message || '系统异常' } });
            });
            requestTravelRecommend({ itemId: params.itemSpuCode, itemType: 'standardItem' }).then(setTravelRecommend).catch(e => { });
            // requestDescription(params).then(setDescription).catch(e => { });

            requestPurchaseNotes({ ...params, itemId: params.dealCode }).then(setDescription).catch(e => { });

            // 链接里面携带footer来判断是否隐藏footerbar
            !params.footer && (!isCps
                ? requestSoldInfo(params).then(data => {
                    let btn = data.linkDTOs && data.linkDTOs[0] || {};
                    isObject(data.activityAdvert, true) && setActivityAdvert(data.activityAdvert);
                    setSoldInfo(data);
                    setFooterBarInfo({
                        title: <div data-item_id={params.dealCode} data-item_code={params.itemSpuCode} dot-event-name="spk_rpage_btn_click">{btn.title || ''}</div>,
                    });
                })
                : requestCpsSoldInfo(params).then(setCpsInfo).catch(e => console.log(e))
            );
        }
    }, [options]);

    return useMemo(() => {
        return <FullScreenPage options={{
            isLoad: options.isLoad,
            shareModel: info.shareModel,
            collect: info.hasCollected
        }}><Basic options={options}>
                <PackageInfo
                    purchaseNotes={description}
                    description={description}
                    travelRecommend={travelRecommend}
                    info={info}
                    cpsInfo={cpsInfo}
                    footerBar={footerBarInfo}
                    suitStore={packageSuiteStore}
                    activityAdvert={activityAdvert}
                    soldInfo={soldInfo}
                />
            </Basic></FullScreenPage>;
    }, [travelRecommend, packageSuiteStore, footerBarInfo, description, info, options, cpsInfo, soldInfo, activityAdvert]);
}
export default PackageInfoContainer;