import React, { useState, useEffect, useMemo } from 'react';
import CommonHeader from '../CommonHeader';
import PackageContent from '../PackageContent';
import GrouponTemp from '../GrouponTemp';
import FooterBar from '../FooterBar';
import { Popup, Swiper } from 'cbkfe-ui';
import { mb_open } from 'cbkfe-bridge';
import { isArray, isObject } from 'cbkfe-utils';
import './style';

function RenderAppointBar({ info }) {
    let { firstCanAppointDay, appointText, appointBar } = info;
    //  appointBar  1可约 2免预约 3电话预约 4(约满/过期) -1 什么都不展示
    switch (appointBar) {
        case 1:
            return <div onClick={() => {
                info.appointLink && mb_open(info.appointLink);
            }} 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>;
        case 2:
            return <div className="product-appoint--noAppoint">
                <img className="appoint--noAppoint__img" src="https://static.caibeike.com/i/2c23ff5cab24d855f02e536fb623f576-abzJoi-eAweAhp1" />
                <span className="appoint--noAppoint__title">免预约</span>
                <span className="appoint--noAppoint__text">{appointText}</span>
            </div>;
        case 3:
            return <div className="product-appoint--phone">
                <img className="appoint--phone__img" src="https://static.caibeike.com/i/3034178c601e233abdad3ac24b7e2843-vi0BUW-eAweAhp1" />
                <span className="appoint--phone__title">电话预约</span>
                <span className="appoint--phone__text">{appointText}</span>
            </div>;
        case 4:
            return <div className="product-appoint product-appoint--date">
                <span className="product-appoint__title">可约日期</span>
                <span className="product-appoint__rightText product-appoint__arrowText">{appointText}</span>
            </div>;
        case -1: return null;
        default: return null;
    }

}

// 权益说明的样式
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 }) {

    return <div>
        <PackageContent Header={() => {
            return <CommonHeader title={info.packageTitle || ''} hideLine={true} label={info.packageSubTitle || ''} />;
        }} info={{
            packageType: info.packageType,
            infos: info.packageContents,
            comments: info.comments,
        }}>
            {isArray(info.rightsComments, true) && <PackageDescription title="权益说明" list={info.rightsComments} />}
        </PackageContent>

    </div>;
}

function PackageInfoSwiper({ images }) {
    const [_images, setImages] = 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 PackageInfo({ footerBar, onClose, popup, info = {}, suitStore = {} }) {
    const showFooterBar = isObject(footerBar, true);
    const showImageUrls = isArray(info.imageUrls, true);
    return <div className="cbkfe-packageInfo">

        <div className={`cbkfe-packageInfo-header ${!showImageUrls ? 'cbkfe-packageInfo-header--pd' : ''}`}>
            <div className="cbkfe-packageInfo-title">套餐详情</div>
            {popup && <div onClick={onClose} className="cbkfe-packageInfo-closeBtn">
                <img className="cbkfe-packageInfo-closeIcon" src="https://static.caibeike.com/i/49afbbf47e2c9e3f4b9e7b5f9667e137-dS8tRP-fgwfghp1" />
            </div>}

        </div>
        <div id="cbkfe-packageInfo-content" className={`cbkfe-packageInfo-content ${showFooterBar ? 'cbkfe-packageInfo-content--showFooter' : ''}`}>
            <div className="cbkfe-packageInfo__scrollView">
                {showImageUrls && <PackageInfoSwiper images={info.imageUrls} />}
                <div className="cbkfe-packageInfo--topInfo">
                    <div className="cbkfe-packageInfo-product">
                        <p className="packageInfo-product__brandName">{info.brandTitle}</p>
                        <p className="packageInfo-product__skuName">{info.packageTitle}</p>
                        <p className="packageInfo-product__text">{info.useTimeTitle}</p>
                    </div>
                    <div className="packageInfo-product__appointBar"><RenderAppointBar info={info} /></div>
                </div>
                {/* <div className="cbkfe-packageInfo--content">
                <PackagePrivilege info={info}/>
            </div> */}
                <PackageMenu info={info} />
                <GrouponTemp.RenderSuitStore
                    suitStore={suitStore}
                    headerConfig={{
                        hideLine: true
                    }}
                ></GrouponTemp.RenderSuitStore>
            </div>
        </div>
        {showFooterBar && <FooterBar showQuickBtns={false} {...footerBar} />}
        <div className="iphonex" />
    </div>;
}

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


function PackageInfoContainer({ footerBar, suitStore, info, showPopup, onClose }) {
    return <Popup
        scrollId="cbkfe-packageInfo-content"
        contentClass="cbkfe-packageInfo-popup"
        show={showPopup}
        onBackClick={onClose}
    >
        <PackageInfo info={info} footerBar={footerBar} suitStore={suitStore} onClose={onClose} popup={true} /></Popup>;
}
export default PackageInfoContainer;