/* eslint-disable complexity */
import React, { useMemo, useState, useEffect, useCallback } from 'react';
import './style';
import DIYCard from '../DIYCard';
import RegularLabels from '../RegularLabels';
import { Label, Countdown } from 'cbkfe-ui';
import { isObject, isArray, queryCode } from 'cbkfe-utils';
import Price from '../Price';
import CpsModules from '../CpsModules';

const isCps = queryCode('strategyType') === 'cps';
export default function ProductInfoCard({ info = {}, cpsInfo = {}, soldInfo, selectedCount }) {
    const [_info, updateInfo] = useState(info);
    const [priceInfo, setPriceInfo] = useState(null);
    useEffect(() => {
        if (_info !== info && isObject(info, true)) {
            updateInfo(info);
        }
    }, [info, _info]);

    const updatePriceInfo = useCallback(() => {
        if (isObject(soldInfo)) {
            let priceLabel = soldInfo.groupNumber > 1 ? `${soldInfo.groupNumber}人团` : '';
            if (isObject(soldInfo.activityAdvert, true) && soldInfo.activityAdvert.priceTag) {
                priceLabel = soldInfo.activityAdvert.priceTag;
            }
            let _price = {};
            if (isArray(soldInfo.multiCardDetails, true)) { // 如果有多次卡
                _price.count = 1; // 初始化count = 1 可以触发Price组件里面次数的相关逻辑
                _price.afterPrice = '次'; // 动态单位
                let item = soldInfo.multiCardDetails[0];
                if (soldInfo.multiCardDetails.length === 1) { // 如果只有一个那么展示 xxx/x次
                    _price.count = item.selectM;
                    _price.countLabel = item.singlePrice ? `￥${item.singlePrice}/次` : '';
                    _price.soldPrice = item.soldPrice;
                    _price.marketPrice = item.marketPrice;
                } else { // 初始化
                    _price.prePrice = '低至';
                }
            } else {
                _price.afterPrice = soldInfo.priceSuffix;
                _price.prePrice = soldInfo.pricePrefix;
            }
            setPriceInfo({
                ...soldInfo,
                ...{
                    label: priceLabel,
                    direction: 'row',
                    ..._price
                }
            });
        }
    }, [soldInfo]);


    useEffect(() => {
        if (isObject(selectedCount, true)) {
            setPriceInfo(info => ({ ...info, ...selectedCount, ...{ prePrice: '', marketPrice: '', soldPrice: selectedCount.singlePrice } }));
        }
    }, [selectedCount]);
    useEffect(() => {
        updatePriceInfo();
    }, [updatePriceInfo]);

    useEffect(() => {
        updatePriceInfo();
    }, []);

    const onTimerEnd = () => {
        // 计时器结束
        location.reload();
    };

    return useMemo(() => {
        if (!isObject(_info, true)) { return null }
        const cardInfo = _info.cardDetail;
        // let isOneGroupon = Number(soldInfo.groupNumber) === 1;

        // isOneGroupon 是否显示成团人数 tag, 原逻辑如上，添加如下逻辑为校验是否是空指针避免页面白屏问题
        let isOneGroupon = true;
        if (isObject(soldInfo, true)) {
            isOneGroupon = soldInfo.groupNumber ? Number(soldInfo.groupNumber) === 1 ? true : false : true;
        }
        const { soldEndTime, soldStartTime, saleStatus, showCountdown, activityAdvert } = soldInfo || {};
        // 判断 marketPrice 市场价格标签上面是否存在多人团标签或价格标签,如果存在就加 margin-top
        const isAddMarginTop  = !(isObject(activityAdvert, true) && activityAdvert.priceTag || (!isOneGroupon));

        // 处理价格旁边的label/
        return <div className="cbkfe-productInfo-card">
            {isObject(cardInfo, true) && <DIYCard cardDetail={cardInfo} from="detail" />}
            <div className="info-content">
                {isArray(_info.recomTags, true) && <div className="info-content-labels">
                    {_info.recomTags.map((tag, index) => <Label key={index} type="primary" className="info-content-label" value={tag} />)}
                </div>}
                {isCps
                    ? <React.Fragment>
                        <CpsModules.Title info={cpsInfo} itemTitle={_info.itemSubTitle} />
                        <CpsModules.Price info={cpsInfo} />
                    </React.Fragment>
                    : isObject(soldInfo, true) && <React.Fragment>
                        <div className="info-content-subTitle">{_info.itemSubTitle}</div>
                        {!showCountdown && soldInfo.soldPrice && <div className="info-content-priceInfo">
                            {priceInfo && <Price {...priceInfo} />}
                        </div>}
                        {showCountdown && soldInfo.soldPrice && <React.Fragment>
                            <div className={`productInfo-timerAndPrice ${!showCountdown ? 'productInfo--price--row' : ''}`}>
                                <div className={(isObject(activityAdvert, true) && activityAdvert.priceTag) || !isOneGroupon ? 'productInfo--price' : 'productInfo--price ais_baseline'}>
                                    <span className="product--soldPrice">
                                        <span className="product--soldPrice--unit" >¥</span>{soldInfo.soldPrice}
                                        {soldInfo.priceFlag && <span className="product--soldPrice--priceTag">{soldInfo.priceFlag}</span>}
                                    </span>
                                    <p className="number-content">
                                        {
                                            (isObject(activityAdvert, true) && activityAdvert.priceTag)
                                                ? <span className="product-number">{activityAdvert.priceTag}</span>
                                                : (!isOneGroupon && <span className="product-number">{soldInfo.groupNumber}人团</span>)
                                        }
                                        {soldInfo.marketPrice && <del className="product-marketPrice" style={{ marginTop: isAddMarginTop ? '0.75rem' : '' }}>¥{soldInfo.marketPrice}</del>}
                                    </p>
                                </div>
                                {
                                    showCountdown ? <Countdown
                                        className="groupon-countDown"
                                        type={saleStatus}
                                        start={soldStartTime}
                                        end={soldEndTime}
                                        onTimerEnd={onTimerEnd}
                                    /> : null
                                }
                            </div>
                        </React.Fragment>}
                    </React.Fragment>}
                {/* <div> */}
                {isArray(_info.saleRules, true) && _info.cardDetail && !_info.cardDetail.linkRuleUrl &&
                    <div style={{ marginTop: '0.5rem' }}>
                        <RegularLabels
                            ruleModel={{ ..._info.saleRuleDTO, type: 'question' }}
                            labels={_info.saleRules}
                        />
                    </div>}
                {/* </div> */}
            </div>
        </div>;
    }, [_info, cpsInfo, priceInfo]);
}