import React, { Component } from 'react';
import './style';
import { browser, isObject } from 'cbkfe-utils';
import { mb_open } from 'cbkfe-bridge';
import { Countdown, Bubble } from 'cbkfe-ui';
import LiveActivityEntry from '../LiveActivityEntry';
import NoticeMessage from '../NoticeMessage';
import RegularLabels from '../RegularLabels';
import { gt } from '../track';

const isMiniSync = browser.parseUA.isMiniSync;

export default class ProductInfo extends Component {

    constructor() {
        super();
        this.isAndroid = browser.versions.android;
    }

    renderBrandTitle() {
        let { brandTitle } = this.props.info;
        if (!brandTitle) {
            return null;
        }
        return <div className="productInfo-brand">
            <img src="https://static.caibeike.com/i/a5f2168463fdc94c5f00e5918499a5f4-M7pKk6" className="productInfo-brand__icon" />
            <p className="productInfo-brand__names">
                <span className="productInfo-brand__name">{brandTitle}</span>
            </p>
            {/* {brandList.length > 1
            ?   <span className="productInfo-brand__append">等{brandList.length}个品牌</span>
            :   null} */}
        </div>;
    }

    rendertimerAndPrice(info) {
        let { soldEndTime, soldStartTime, saleStatus, showCountdown, activityAdvert, specialPriceText } = info;
        activityAdvert = activityAdvert || this.props.activityAdvert;
        let isOneGroupon = Number(info.groupNumber) === 1;
        const onTimerEnd = () => {
            // 计时器结束
            location.reload();
        };

        return <React.Fragment>
            <div className={`productInfo-timerAndPrice ${!showCountdown ? 'productInfo--price--row' : ''}`}>
                <div className="productInfo--price">
                    <span className="product--soldPrice">
                        <span className="product--soldPrice--unit" >¥</span>
                        {info.soldPrice}
                        {info.priceFlag && <span className="product--soldPrice--priceTag">{info.priceFlag}</span>}
                    </span>
                    <p className="number-content">
                        {
                            (isObject(activityAdvert, true) && activityAdvert.priceTag)
                                ? <span className="product-number">{activityAdvert.priceTag}</span>
                                : (!isOneGroupon && <span className="product-number">{info.groupNumber}人团</span>)
                        }
                        {info.marketPrice && <del className="product-marketPrice">¥{info.marketPrice}</del>}

                    </p>
                </div>
                {
                    showCountdown ? <Countdown
                        className="groupon-countDown"
                        type={saleStatus}
                        start={soldStartTime}
                        end={soldEndTime}
                        onTimerEnd={onTimerEnd}
                    /> : null
                }

            </div>
            {specialPriceText && <Bubble text={specialPriceText} left={!showCountdown ? '0.8rem' : '1rem'} />}

        </React.Fragment>;
    }

    renderAppointBar() {
        let { onDateClick, info } = this.props;
        let { firstCanAppointDay, saleStatus, showCanAppointDay, appointCalendarLinkUrl } = info;
        if (saleStatus === 5 || !showCanAppointDay) { // 停止开团 和 非在线预约单子(showCanAppointDay) 不需要展示此模块
            return false;
        }
        return <div onClick={() => {
            if (appointCalendarLinkUrl) {
                mb_open(appointCalendarLinkUrl);
                return;
            }
            typeof onDateClick === 'function' && onDateClick();
        }} {...gt('gbdetail_gds_appointdate_pv,gbdetail_gds_appointdate_click')} className="product-appoint">
            {/* <i className="iconfont product-appoint__icon"></i> */}
            <span className="product-appoint__title">最早可约：</span>
            <span className="product-appoint__date">{firstCanAppointDay}</span>
            <span

                className="product-appoint__arrowText">查看日期
                <i className="iconfont product-appoint__arrow"></i>
            </span>
        </div>;
    }

    renderRecommendTags() {
        let { recomTags } = this.props.info;
        return Array.isArray(recomTags) && recomTags.length > 0
            ? <div className="productor-recommend__tags">
                {recomTags.map((tag, index) => <span key={tag + index} className="productor-recommend__tag"><span className={`productor-recommend__tagText ${this.isAndroid ? 'recommend__tagText--and' : ''}`}>{tag}</span></span>)}
            </div>
            : null;
    }

    renderRecommend() {
        let { recomText } = this.props.info;
        recomText = recomText.slice(0, 10);
        return (
            <div {...gt('gbdetail_gds_recmoda_pv')} className="product-recommend">
                {this.renderRecommendTags()}
                {recomText.map((text, index) => <p key={text + index} className={`${!index ? 'recommend__text--first' : ''} product-recommend__text`}>{text}</p>)}

            </div>
        );
    }

    renderNotices() {
        let { notices } = this.props.info;
        return notices ? <div className="product-store-adjustList">
            <NoticeMessage messages={notices} />
        </div> : null;
    }

    renderRegularLabels() {
        let { ruleModel, info } = this.props;
        if (isObject(info.saleRuleDTO, true)) { // 这个是商户卡新的数据模型
            return <RegularLabels
                showSafeguard={info.saleRuleDTO.consumerProtection}
                ruleModel={{ ...info.saleRuleDTO, type: 'question' }}
                labels={info.saleRules}
            />;
        }
        if (ruleModel) {
            return <RegularLabels
                showSafeguard={info.showSafeguard}
                canFreeChange={info.canFreeChange}
                ruleModel={{ ...ruleModel, type: 'question' }}
                labels={info.saleRules}
            />;
        }
    }
    render() {
        let { info, insertPriceArea, regularLabelSku, brforTags = null, itemTitleStyle = null, isShowTimerAndPrice = true} = this.props;
        let { itemTitle, itemSubTitle, recomText, showSafeguard, activityAdvert, saleRuleDTO } = info;
        activityAdvert = activityAdvert || this.props.activityAdvert;
        showSafeguard = showSafeguard || !!(saleRuleDTO && saleRuleDTO.consumerProtection);
        // 是否有推荐文案
        const hasRecommendText = Array.isArray(recomText) && recomText.length > 0;
        const _priceArea = typeof insertPriceArea === 'function' && insertPriceArea(info) || null;
        return (
            <React.Fragment>
                <div className="groupon-product-info">
                    <div className="groupon-product-section">
                        {/** 品牌title */}
                        {this.renderBrandTitle()}
                        {/** 商品Title */}
                        {itemTitle && <p className="groupon-product__name" style={itemTitleStyle}>{itemTitle}</p>}
                        {itemSubTitle && <p className="groupon-product__subTitle">{itemSubTitle}</p>}
                        {(regularLabelSku && !showSafeguard) && this.renderRegularLabels()}

                        {/** 推荐标签 推荐文案没有的时候展示 */}
                        <div className="recommend-tags--only" {...gt('gbdetail_gds_recmodb_pv')}>
                            {this.renderRecommendTags()}
                        </div>
                        {/** 计时和价格区Title */}
                        {_priceArea}
                        {isShowTimerAndPrice && info.groupNumber >= 0 && info.soldPrice && this.rendertimerAndPrice(info)}
                        {/** 门店调整  */}
                        {this.renderNotices()}
                        {brforTags}
                        {/** 可约日期， 只有预约打卡的商品才会展示, 停止开团也不展示  */}
                        {this.renderAppointBar()}
                    </div>
                    {/* {isObject(activityAdvert, true) && <LiveActivityEntry className="groupon-product-live" info={activityAdvert} />} */}
                    <div className="groupon-product-section">

                        {/** 运营推荐区域 推荐文案没有的话不展示该模块 */}
                        {/* hasRecommendText && this.renderRecommend() */}
                        {/** 退改规则 --不展示消费者保障的样式附着在内容区域 */}
                        {(!regularLabelSku && !showSafeguard) && this.renderRegularLabels()}
                    </div>
                    {/* 微信小程序中双十二广告位不展示 */}
                    {isObject(activityAdvert, true) && (activityAdvert.activityType !== "DOUBLE_TWELVE" || !isMiniSync ) &&  <LiveActivityEntry className={`groupon-product-live ${activityAdvert.activityType}`} info={activityAdvert} />}
                </div>
                {/** 退改规则 --展示消费者保障的样式独立出来 */}
                <div {...gt('gbdetail_gds_consum_pv,gbdetail_gds_consum_click')}>
                    {showSafeguard && this.renderRegularLabels()}
                </div>
            </React.Fragment>
        );
    }
}