import React, { useState, useMemo, useEffect } from 'react';
import { browser } from 'cbkfe-utils';
import { mb_open, mb_fullScreen } from 'cbkfe-bridge';
import './style/index';

const isApp = browser.parseUA.isApp;
const isAndroid = browser.versions.android;
const defaultConfig = {
    cardImage: 'https://static.caibeike.com/i/4610a7f0307f4e8be8866cd56de8cd6d-RsjqzZ-iCMwfAAhp1',
    bgImage: {
        package: 'https://static.caibeike.com/i/3924a8ca81f28bdbbd793ebda8b9225c-O3bM0M-iCMwbkghp1',
        card: 'https://static.caibeike.com/i/d8b897a4688cd72a1edc641767a0f5de-uHhZGk-iCMwbkghp1',
        toll: 'https://static.caibeike.com/i/d8b897a4688cd72a1edc641767a0f5de-uHhZGk-iCMwbkghp1'
    },
    bgColor: 'linear-gradient(to bottom right,#FFD1CC, #FFCCD4)'
};
const computed = function (cardDetail, from) {
    switch (from) {
        case 'detail': return {
            imgUrl: cardDetail.useConfig && cardDetail.cardImage || defaultConfig.cardImage,
        };
        default: return {
            imgUrl: cardDetail.useConfig && cardDetail.bgImage || defaultConfig.bgImage[from],
            color: cardDetail.useConfig && cardDetail.bgColor || defaultConfig.bgColor
        };
    }
};

function DetailCard({ info, theme }) {
    const cardWidth = info.storeNum && info.validDateNum;// 如果card上展示三个，宽度设为100%

    const isRefund = !!info.linkRuleUrl; // 如果有ruleLinkUrl 则需要展示
    const isAndroid = browser.parseUA.platform === 'android';


    // 过期退标签展示
    const noRefundLabel = (info) => {
        return <div className="diy-card-info diy-card-info--normal">
            {
                (info.storeNum && info.combineType !== 2) && <div className="card-info-item">
                    <span className="card-info-count">{info.storeNum}</span>
                    <span>{info.storeNumDesc || '家门店'}</span>
                </div>
            }

            {
                (info.packageNum && info.combineType === 2) && <div className="card-info-item">
                    <span className="card-info-count">{info.packageNum}</span>
                    <span>项权益</span>
                </div>
            }

            {
                info.validDateNum && <div className="card-info-item">
                    <span className="card-info-count">{info.validDateNum}</span>
                    <span>天有效</span>
                </div>
            }
        </div>;
    };

    // 非过期退标签展示
    const refundLabel = (info) => {

        return <div className="diy-card-info diy-card-info--isRefund">
            {
                (info.storeNum && info.combineType !== 2) && <div className="card-info-item-redund-layout">
                    <img className={` icon-size-normal ${isAndroid ? 'icon-size-android' : ''}`} src="https://static.caibeike.com/i/24890516d8ddd959c278164892f7f978-pzvz4j-fkwfkhp1" />
                    <div className="card-info-item">
                        <span className="card-info-count_refund">{info.storeNum}</span>
                        <span className="card-info-count_title">{info.storeNumDesc || '家门店'}</span>
                    </div>
                </div>
            }

            {
                (info.packageNum && info.combineType === 2) && <div className="card-info-item-redund-layout">
                    <img className={` icon-size-normal ${isAndroid ? 'icon-size-android' : ''}`} src="https://static.caibeike.com/i/24890516d8ddd959c278164892f7f978-pzvz4j-fkwfkhp1" />
                    <div className="card-info-item">
                        <span className="card-info-count_refund">{info.packageNum}</span>
                        <span className="card-info-count_title">项权益</span>
                    </div>
                </div>
            }

            {
                info.validDateNum && <div className="card-info-item-redund-layout">
                    <img className={` icon-size-normal  
                    ${isAndroid ? 'icon-size-android' : ''}
                    `} src="https://static.caibeike.com/i/24890516d8ddd959c278164892f7f978-pzvz4j-fkwfkhp1"
                    />
                    <div className="card-info-item">
                        <span className="card-info-count_refund">{info.validDateNum}</span>
                        <span className="card-info-count_title">天有效</span>
                    </div>
                </div>
            }

            {
                isRefund && <div className="card-info-item-layout" >
                    <img className="icon-size" src="https://static.caibeike.com/i/24890516d8ddd959c278164892f7f978-pzvz4j-fkwfkhp1" />
                    <div className="card-info_refund">
                        <div >过期退</div>
                    </div>
                    {/* <img className="icon-size" src="https://static.caibeike.com/i/4cbd4e94ee9f5eca35281dc82c527ea2-1El4nz-fkwfkhp1" /> */}
                </div>
            }
        </div>;
    };

    return <div className="cbkfe-diy-card--detail">
        <div className="diy-card-detail">
            <img className="cbkfe-diy-cardImg" src={theme.imgUrl} />
            <div className="cbkfe-diyCard-content">
                <div className="diy-card-content">
                    {!info.useConfig && <div className="diy-card__title">{info.cardTitle}</div>}
                    <div className={`${cardWidth ? 'diy-card-info_refund ' : 'diy-card-info_no-refund'}
                    `}>
                        {isRefund
                            ?
                            refundLabel(info)
                            :
                            noRefundLabel(info)
                        }
                    </div>
                </div>
            </div>
        </div>
    </div >;
}

function PackageCard({ info, theme, barHeight }) {
    return <div style={{ background: theme.color, paddingTop: barHeight + 'px' }} className="cbkfe-card--package">
        <div className="package-card">
            <img className="package-card__img" src={theme.imgUrl} />
            <div className="package-card-detail">
                <div className="package-card-title">{!info.useConfig ? info.cardTitle : ''}</div>
                <div className="package-card-info">
                    {info.storeNum && <span className="package-card-storeInfo">{info.storeNum}{info.storeNumDesc || '店可选'}</span>}
                    {info.cardUrl && <span onClick={() => info.cardUrl && mb_open(info.cardUrl)} className="package-card-urlBtn">查看详情<i className="iconfont icon--arrow"></i></span>}
                </div>
            </div>
        </div>
    </div>;
}


function CardDetailCard({ info, theme, barHeight }) {
    return <div style={{ background: theme.color, paddingTop: barHeight + 'px' }} className="cbkfe-card--cardDetail">
        <div className="package-card">
            <img className="package-card__img" src={theme.imgUrl} />
            <div className="package-card-detail">
                <div className="package-card-info">
                    <div className="package-card-title">{!info.useConfig ? info.cardTitle : ''}</div>
                    {info.cardUrl && <span onClick={() => info.cardUrl && mb_open(info.cardUrl)} className="package-card-urlBtn">查看详情<i className="iconfont icon--arrow"></i></span>}
                </div>
                {
                    info.multipleCard
                        ? <div className="card-packages-title">剩余<span className={`package-card-count package-card-count--${info.multipleCard ? 'multi' : ''}`}>{info.packageNum}</span>次可用</div>
                        : <div className="card-packages-title"><span className="package-card-count">{info.packageNum}</span>个可用套餐</div>
                }
            </div>
        </div>
    </div>;
}

function CardDetailTolls({ info, theme, barHeight }) {
    return <div style={{ background: theme.color, paddingTop: barHeight + 'px' }} className="cbkfe-card--cardDetail">
        <div className="package-card">
            <img className="package-card__img" src={theme.imgUrl} />
            <div className="package-card-detail">
                <div className="package-card-info">
                    <div className="package-card-title">{!info.useConfig ? info.cardTitle : ''}</div>
                </div>
                {info.cardUrl && <span className="package-card-tollBtns" onClick={() => info.cardUrl && mb_open(info.cardUrl)}>
                    再买一张<i className="iconfont icon--arrow"></i>
                </span>}
            </div>
        </div>
    </div>;
}

function CardDetailCombination({ info, theme, barHeight }) {
    // 这里的"barHeight-50"是因为卡片整体向下平移了50px
    return <div style={{ background: theme.color, paddingTop: barHeight - 50 + 'px' }} className="cbkfe-card--combination">

        <div className="package-card">
            <img className="package-card__img" src="https://static.caibeike.com/i/4610a7f0307f4e8be8866cd56de8cd6d-RsjqzZ-iCMwfAAhp1" />
            <div className="package-card-detail">
                {info.cardNo && <div className="package-card-vouchersNo">卡号：{info.cardNo}</div>}
                <div className="package-card-info">
                    <div className="package-card-title">{!info.useConfig ? info.cardTitle : ''}</div>
                </div>
                <div className="card-packages-title">有效期：{info.validity}</div>
                {info.cardUrl && <div className="urlBtn-layout">
                    <span onClick={() => info.cardUrl && mb_open(info.cardUrl)} className="package-card-urlBtn">再买一张<i className="iconfont icon--arrow"></i></span>
                </div>}
            </div>

        </div>
    </div>;
}

export default function DIYCard({ cardDetail = {}, from = 'detail' }) {
    const [theme] = useState(computed(cardDetail, from));
    const [info] = useState(cardDetail);
    const [barHeight, setBarHeight] = useState(0);
    useEffect(() => {
        isApp && mb_fullScreen({
            isFull: true, interval: 0, success: (result) => {
                setBarHeight(result && result.barHeight || (isAndroid ? 74 : 64));
            }
        });
    }, []);
    return useMemo(() => {
        switch (from) {
            case 'detail': return <DetailCard info={info} theme={theme} />;
            case 'package': return <PackageCard info={info} barHeight={barHeight} theme={theme} />;
            case 'card': return <CardDetailCard info={info} barHeight={barHeight} theme={theme} />;
            case 'combination': return <CardDetailCombination info={info} barHeight={barHeight} theme={theme} />;
            case 'toll': return <CardDetailTolls info={info} barHeight={barHeight} theme={theme} />;
            default: return null;
        }
    }, [theme, from, info, barHeight]);
}