import React, { useState, useEffect, useMemo } from 'react';
import './style/index';
import { Swiper, Context } from 'cbkfe-ui';
import classNames from 'classnames';
import GrouponSwiper from '../GrouponSwiper';
import LimitSaveImg from '../LimitSaveImg';
import { isArray, isObject, parseUrlParams, localUrl, browser, isString } from 'cbkfe-utils';
import { mb_open } from 'cbkfe-bridge';
import MorePackages from '../MorePackages';
import CommonHeader from '../CommonHeader';
import ExperiencerCard from '../ExperiencerCard';
import FitStoreCard from '../FitStoreCard';
import PurchaseNotes from '../PurchaseNotes';
import RecommendLike from '../RecommendLike';
import Disclaimer from '../Disclaimer';
import PackageContent from '../PackageContent';
import ProductInfo from '../ProductInfo';
import NoticeMessage from '../NoticeMessage';

const isApp = browser.parseUA.isApp;
const isAndroid = browser.versions.android;
const GrouponSkuDetailSwiper = function ({ imageUrls, qrCode, containerClassName }) {
    return useMemo(() => {
        if (!isArray(imageUrls, true) || !isObject(qrCode)) {
            return null;
        }
        return <GrouponSwiper
            containerClassName={containerClassName}
            position="bottom"
            disableStackBlur={true}
            containerHeight="11rem"
            swiperClassName="groupon-sku-container"
            showModal={qrCode.imageUrl}
            noShadow={true}
            noBlur={!isAndroid}
            images={imageUrls} >
            {isObject(qrCode, true) && <div style={{ alignItems: isApp ? 'flex-start' : 'center' }} className="swiper-model-content">
                <span className="swiper-qrcode">
                    <LimitSaveImg
                        onClick={() => { mb_saveImage({ url: qrCode.imageUrl }); }}
                        src={qrCode.imageUrl}
                        activeCodeStatus={qrCode.activeCodeStatus}
                        randomCode={qrCode.randomCode}
                    /></span>
                <div className="swiper-text">
                    <span className="swiper-large-text">{qrCode.comment}</span>
                    <span className="swiper-small-text">{qrCode.tip}</span>
                </div>
                {isApp
                    ? <span
                        onClick={() => mb_saveImage({ url: qrCode.imageUrl })}
                        className="swiper-save-btn">
                        <img className="swiper-brn-icon" src="https://static.caibeike.com/i/fa3f17415ce5a629ab59b9fd544348fc-MIoN5P" />
    保存到相册
                    </span>
                    : null
                }
            </div>}

        </GrouponSwiper>;
    }, [imageUrls, qrCode, containerClassName]);

};



function GrouponSkuAppointBar({ info }) {
    // let combineStatus = 2;
    // let appointType = 4;
    // appointType 1：在线预约；2：免预约；3：电话预约 4：课程适用
    // combineStatus 0:正常 未过期且可约; 2: 已约满 3: 已过期
    let config = {};
    switch (info.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;
        case 4:
            config = {
                icon: 'https://static.caibeike.com/i/6127d46f75d6446dd4b310129ca7f21f-wGV00G-eeweehp1',
                title: '课程使用',
            };
            break;
    }
    return (
        <div
            onClick={() => {
                info.appointLink && mb_open(info.appointLink);
            }}
            className="packageDetail-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" style={{ lineHeight: '0.9rem' }}>
                        {config.title}
                    </span>
                    {/*最早可约今天字段 firstCanAppointDay */}
                    <span className="card-appointDate-value" style={{ lineHeight: '0.8rem' }} dangerouslySetInnerHTML={{ __html: info.firstCanAppointDay }}></span>
                </p>
                {/* 有效日期字段 useTimeTitle */}
                <p className="product-card-validityDate"> {info.useTimeTitle}</p>
                <NoticeMessage marginTop="0.2" limitLine={1} lineHeight={0.8} >
                    {info.disabledTimeTitle && <div className="product-card-invaildDate">{info.disabledTimeTitle}</div>}
                </NoticeMessage>
            </div>
            {info.combineStatus === 2 && (
                <span className="card-appointDate-fullText">已约满</span>
            )}
            {info.appointType === 1 ? (
                <span
                    dot-event-name="spk_rpage_date_click"
                    // data-item_id={params.dealCode}
                    // data-item_code={params.itemSpuCode}
                    className="product-card-appoint__arrowText"
                >
                    {info.combineStatus === 0 ? '可约日期' : ''}
                    {info.combineStatus !== 2 && (
                        <i className="iconfont product-card-appoint__arrow"></i>
                    )}
                </span>
            ) : null}
        </div>
    );
}

function GrouponSkuPackageInfo({ cardInfo }) {
    const [_cardInfo, setCardInfo] = useState(cardInfo);
    useEffect(() => {
        if (_cardInfo !== cardInfo && isObject(cardInfo, true)) {
            setCardInfo(cardInfo);
        }
    }, [_cardInfo, cardInfo]);
    return useMemo(() => {
        if (!isObject(_cardInfo, true)) {
            return null;
        }
        return (
            <div className="packageDetail-card-tag">
                <ProductInfo
                    brforTags={<GrouponSkuAppointBar info={{
                        combineStatus: _cardInfo.combineStatus,
                        appointType: _cardInfo.appointType,
                        appointLink: _cardInfo.appointLink,
                        firstCanAppointDay: _cardInfo.firstCanAppointDay,
                        useTimeTitle: _cardInfo.useTimeTitle,
                    }} />}
                    regularLabelSku={true}
                    ruleModel={{
                        showSafeguard: false,
                        showExplain: true
                    }} info={{ ..._cardInfo, ...{ itemSubTitle: '' } }} />
            </div>
        );
    }, [_cardInfo]);
}

function GrouponSkuPackageContent({ contentInfo }) {
    const [_contentInfo, setContentInfo] = useState(contentInfo);
    useEffect(() => {
        if (_contentInfo !== contentInfo && isObject(setContentInfo, true)) {
            setContentInfo(contentInfo);
        }
    }, [_contentInfo, contentInfo]);
    return useMemo(() => {
        if (!isObject(_contentInfo, true)) {
            return null;
        }
        return (
            <div className="packageDetail-card-content">
                <PackageContent info={_contentInfo} />
            </div>
        );
    }, [_contentInfo]);
}

function GrouponSkuMorePackage({ morePackagesInfo }) {
    const [_morePackagesInfo, setMorePackagesInfo] = useState(morePackagesInfo);
    useEffect(() => {
        if (
            _morePackagesInfo !== morePackagesInfo &&
            isObject(morePackagesInfo, true)
        ) {
            setMorePackagesInfo(morePackagesInfo);
        }
    }, [_morePackagesInfo, morePackagesInfo]);
    return useMemo(() => {
        if (!isObject(_morePackagesInfo, true)) {
            return null;
        }
        return (
            <div >
                <div className="module-split"></div>
                <div className="module-padding">
                    <CommonHeader
                        classname="experiencer-header-class "
                        title="更多套餐"
                        rightText={
                            <span
                                dot-event-name="spk_page_expmor_click"
                                dot-pv-name="spk_page_expmor_pv"
                            >
                                查看全部
                            </span>
                        }
                        handleClick={() => {
                            location.href = _morePackagesInfo.topInfo.linkUrl;
                            return;
                        }}
                    />
                    <MorePackages
                        info={_morePackagesInfo.topInfo}
                        showInitNumber={2}
                        showGuide={false}
                        dealSkus={_morePackagesInfo.dealSkus}
                    />
                </div>
            </div>
        );
    }, [_morePackagesInfo]);
}


function GrouponSkuExperiencer({ experiencerInfo, index }) {

    const [_experiencerInfo, setExperiencerInfo] = useState(experiencerInfo);
    const [_index, setIndex] = useState(index);
    useEffect(() => {
        if (
            _experiencerInfo !== experiencerInfo &&
            isArray(experiencerInfo, true) &&
            index !== _index
        ) {
            setExperiencerInfo(experiencerInfo);
            setIndex(index);
        }
    }, [_experiencerInfo, experiencerInfo, index, _index]);
    return useMemo(() => {
        if (!isArray(_experiencerInfo.travels, true)) {
            return null;
        }
        return (
            <div
                data-anchor="体验师推荐"
                className="packageDetail-experiencer-container cardTemp-anchor "
            >
                <div className="module-split"></div>
                <CommonHeader
                    classname="packageDetail-header-class "
                    title="体验师推荐"
                    rightText={
                        <span
                            dot-event-name="spk_page_expmor_click"
                            dot-pv-name="spk_page_expmor_pv"
                        >
                            查看全部
                        </span>
                    }
                    num={_experiencerInfo.travelNumber}
                    handleClick={() => {
                        location.href = _experiencerInfo.url;
                        return;
                    }}
                />
                <div
                    dot-event-name="spk_page_exp_click"
                    dot-pv-name="spk_page_exp_pv"
                >
                    <ExperiencerCard
                        randomCount={Math.random()}
                        data={_experiencerInfo.travels}
                        index={index}
                        hasLogin={true}
                    />
                </div>
            </div >
        );
    }, [_experiencerInfo, index]);
}



function GrouponSkuContextIntro({ contextIntro }) {

    const [_contextIntro, setContextIntro] = useState(contextIntro);
    useEffect(() => {
        if (_contextIntro !== contextIntro && isObject(contextIntro, true)) {
            setContextIntro(contextIntro);
        }
    }, [_contextIntro, contextIntro]);
    return useMemo(() => {
        if (!isObject(_contextIntro, true)) {
            return null;
        }
        return (
            <div>
                <div className=" module-split"></div>
                <div className="module-padding">
                    <CommonHeader
                        title="图文介绍"
                        className="productInfo-card-context cardTemp-anchor"
                    />
                    <div
                        style={{
                            height:
                                _contextIntro.showLimit &&
                                    _contextIntro.showLimit !== -1
                                    ? _contextIntro.limitContext * 100 + 'vh'
                                    : 'auto',
                            overflow: 'hidden',
                            marginTop: '0.5rem'
                        }}
                    >
                        <Context html={_contextIntro.description} padding={15} />
                    </div>
                </div>
            </div>
        );
    }, [_contextIntro]);
}

function GrouponSkuSuitStore({ suitStoreInfo }) {
    const [_suitStoreInfo, setSuitStoreInfo] = useState(suitStoreInfo);
    useEffect(() => {
        if (_suitStoreInfo !== suitStoreInfo && isObject(suitStoreInfo, true)) {
            setSuitStoreInfo(suitStoreInfo);
        }
    }, [_suitStoreInfo, suitStoreInfo]);
    return useMemo(() => {
        if (!isObject(_suitStoreInfo, true)) {
            return null;
        }
        return (
            <section>
                <div className=" module-split"></div>
                <div className="module-padding">
                    <CommonHeader
                        classname="fitstore-header"
                        title="适用门店"
                        rightText={
                            <span
                                dot-pv-name="spk_rpage_shpmor_pv"
                                dot-event-name="spk_rpage_shpmor_click"
                            >
                                查看全部
                            </span>
                        }
                        num={_suitStoreInfo.storeNumber}

                        handleClick={() => {
                            location.href = _suitStoreInfo.linkUrl;
                            return;
                        }}
                    />
                    <div style={{ padding: '1rem 0 0' }}>
                        <FitStoreCard data={_suitStoreInfo.currentStore} />
                    </div>
                </div>
            </section>
        );
    }, [_suitStoreInfo]);
}

function GrouponSkuPurchase({ saleRuleListData }) {

    return useMemo(() => {
        if (!isObject(saleRuleListData, true)) {
            return null;
        }
        return (
            <section >
                <div className="module-split"></div>
                <PurchaseNotes
                    className="cardTemp-anchor packageDetail-fitstore-container "
                    props={{ 'data-anchor': '购买须知' }}
                    {...saleRuleListData}
                />
            </section>
        );
    }, [saleRuleListData]);
}

function GrouponSkuNotes({ notesDisclaimer }) {
    const [_notesDisclaimer, setNotesDisclaimer] = useState(notesDisclaimer);
    useEffect(() => {
        if (_notesDisclaimer !== notesDisclaimer && isObject(notesDisclaimer)) {
            setNotesDisclaimer(notesDisclaimer);
        }
    }, [_notesDisclaimer, notesDisclaimer]);
    return useMemo(() => {
        if (!isArray(_notesDisclaimer, true)) {
            return null;
        }
        return (
            <section >
                <div className=" module-split"></div>
                <Disclaimer
                    attrs={{ 'data-anchor': '免责说明' }}
                    className=" packageDetail-fitstore-container"
                    notes={_notesDisclaimer}
                />
            </section>
        );
    }, [_notesDisclaimer]);
}

function BussinseCooperation({ businessCooperation, value }) {

    return (
        <div>
            {businessCooperation && (
                <div>
                    <div className="module-split"></div>
                    <div
                        onClick={() =>
                            location.href = localUrl.url('/ms/user/sponsor/joinus')
                        }
                        className="packageDetail-business-cooper"
                    >
                        {value || '我是商家，想跟彩贝壳合作'}
                        <i className="iconfont icon--arrow" />
                    </div>
                </div>

            )}
            <div className=" module-split"></div>
        </div>
    );
}

function GrouponSkuRecommendLike({ itemListLike }) {
    const [_itemListLike, setItemListLike] = useState(itemListLike);
    useEffect(() => {
        if (_itemListLike !== itemListLike && isObject(itemListLike)) {
            setItemListLike(itemListLike);
        }
    }, [_itemListLike, itemListLike]);
    return useMemo(() => {
        if (!isArray(_itemListLike && _itemListLike.recommendItems, true)) {
            return null;
        }
        return (
            <div>
                <RecommendLike
                    option={{
                        title: '你可能还会喜欢',
                        className: 'packageDetail-container',
                        itemList: _itemListLike.recommendItems,
                    }}
                />
            </div>
        );
    }, [_itemListLike]);
}

export default function GrouponSkuDetail({
    value, index, className
}) {
    return (
        <div className={`page-background ${className}`}>
            {/**轮播图 */}
            {value.imageUrls && <GrouponSkuDetailSwiper containerClassName={className} imageUrls={value.imageUrls} qrCode={value.qrCode} index={index} />}
            {/**轮播图下基础信息 */}
            {/**推荐信息 */}
            {<GrouponSkuPackageInfo cardInfo={value} />}
            {/**套餐信息 */}
            {(isArray(value.packageContents, true) || isArray(value.comments, true)) && <GrouponSkuPackageContent contentInfo={{
                packageType: value.packageType,
                packageContents: value.packageContents,
                comments: value.comments,
            }} />}
            {/**更多套餐信息 */}
            {
                isObject(value.moreSku, true) && <GrouponSkuMorePackage morePackagesInfo={{
                    topInfo: {
                        imageUrl: value.moreSku.imageUrl,
                        title: value.moreSku.itemTitle,
                        linkUrl: value.moreSku.linkUrl,
                    },
                    dealSkus: value.moreSku.dealSkus,
                }} />
            }
            {/**体验师推荐 */}
            {isObject(value.experiencerInfo, true) && <GrouponSkuExperiencer experiencerInfo={value.experiencerInfo} index={index} />}
            {/**图文详情 */}
            {(value.purchaseInfo && value.purchaseInfo.description) && <GrouponSkuContextIntro contextIntro={value.purchaseInfo} />}
            {/**适用门店 */}
            {isObject(value.suitStoreInfo, true) && <GrouponSkuSuitStore suitStoreInfo={value.suitStoreInfo} />}
            {/**购买须知 */}
            {isArray(value.saleRuleList, true) && <GrouponSkuPurchase saleRuleListData={value.saleRuleListData} />}
            {/**免责说明 */}
            {isArray(value.notesDisclaimer, true) && <GrouponSkuNotes notesDisclaimer={value.notesDisclaimer} />}
            {/**商家合作 */}
            <BussinseCooperation businessCooperation={true} value={false} />
            {/**推荐信息 */}
            {isObject(value.itemListLike, true) && < GrouponSkuRecommendLike itemListLike={value.itemListLike} />}
        </div>
    );
}