/* eslint-disable react/jsx-no-duplicate-props */
import React, { useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
import FooterBar from '../FooterBar';
import { isArray, isObject, queryCode, browser } from 'cbkfe-utils';
import PackageCountList from '../PackageCountList';
import './style/index';

const params = queryCode();
const isApp = browser.parseUA.isApp;
function RenderFooterBar({ defaultId, data = {}, isVip = false, selectedCount, hideQuickBtns, coverConfig = {}}, ref) {

    const [footerBar, setFooterBarInfo] = useState(null);
    const [showPopup, setShowPopup] = useState(false);
    const [selCountInPopup, setSelCountInPopup] = useState(null);
    const [footerBarInfoInPopup, setFooerBarInfoInPopup] = useState(null);

    // 暴露方法给外部调用
    useImperativeHandle(ref, () => {
        return {
            setFooterBarInfo,
            setShowPopup,
            setSelCountInPopup,
            setFooerBarInfoInPopup
        };
    });


    const getDefaultCount = useCallback(() => {
        if (isArray(data.multiCardDetails, true)) {
            let result = null; // 先默认获取第一个
            if (defaultId) {
                result = data.multiCardDetails.find(item => item.itemSkuId == defaultId); // 根据id查找
            } else {
                result = data.multiCardDetails.find(item => item.soldStatus !== 3); // 默认查找第一个可以用的
            }
            return result || data.multiCardDetails[0]; // 如果都抢光了，就取第一个
        }
    }, [defaultId, data]);

    const computedPrice = useCallback((selected) => {
        let price = {};
        if (isArray(data.multiCardDetails, true)) {
            let cur = getDefaultCount(); // 获取默认的count
            price.count = 1; // 初始化count = 1 可以触发Price组件里面次数的相关逻辑
            price.afterPrice = '次'; // 动态单位
            price.prePrice = '';
            price.openUrl = data.linkDTOs && data.linkDTOs[0] && data.linkDTOs[0].url;
            price.showCountPopup = false;
            if (data.isInviteGroup === 1) {
                if (data.inviteGroupType === 'detail') {
                    price.prePrice = '支付';
                    price.afterPrice = '';
                    price.soldPrice = cur.soldPrice;
                    price.marketPrice = '';
                } else {
                    price.prePrice = '低至';
                    price.soldPrice = cur.soldPrice;
                    price.marketPrice = cur.marketPrice;
                }
            } else if (data.multiCardDetails.length === 1) { // 如果只有一个多次卡，那么就默认使用第一张卡的数据
                price.count = cur.selectM;
                price.soldPrice = cur.soldPrice;
                price.marketPrice = cur.marketPrice;
            } else if (defaultId) {
                price.count = cur.selectM;
                price.soldPrice = cur.soldPrice;
                price.marketPrice = cur.marketPrice;
                let appendStr = `&itemSpuCode=${cur.itemSpuCode}&itemSkuId=${cur.itemSkuId}`;
                price.openUrl = (price.openUrl || price.$openUrl || '') + (isApp ? encodeURIComponent(appendStr) : appendStr);
            } else if (isObject(selected, true)) { // 如果已经有选中的 这种情况一定是有多个多次卡，并且选中了某张卡
                price.count = selected.selectM;
                price.soldPrice = selected.soldPrice;
                price.marketPrice = selected.marketPrice;
                let appendStr = `&itemSpuCode=${selected.itemSpuCode}&itemSkuId=${selected.itemSkuId}`;
                price.openUrl = (price.openUrl || price.$openUrl || '') + (isApp ? encodeURIComponent(appendStr) : appendStr);
            } else { //  走到这里大概率是有多张多次卡，并且没有被选中，那么取后端默认的数据
                price.prePrice = '低至';
                price.marketPrice = '';
                price.$openUrl = price.openUrl; // 缓存一下老的
                price.openUrl = ''; // 如果有多个的情况，那么默认的点击事件要给干掉 因为要展示弹窗
                price.showCountPopup = true;
            }
            return price;
        } else {
            if (data.isInviteGroup === 1) {
                price.count = 1; // 初始化count = 1 可以触发Price组件里面次数的相关逻辑
                price.afterPrice = '次'; // 动态单位
                price.prePrice = '';
                price.openUrl = data.linkDTOs && data.linkDTOs[0] && data.linkDTOs[0].url;
                price.showCountPopup = false;
                if (data.inviteGroupType === 'detail') {
                    price.prePrice = '支付';
                    price.afterPrice = '';
                    price.soldPrice = data.soldPrice;
                    price.marketPrice = '';
                } else {
                    price.prePrice = '低至';
                    price.soldPrice = data.soldPrice;
                    price.marketPrice = data.marketPrice;
                }
            } else {
                price.afterPrice = data.priceSuffix; // 动态单位
                price.prePrice = data.pricePrefix;
            }
            return price;
        }
    }, [data, getDefaultCount, defaultId]);

    useEffect(() => {
        if (!showPopup) {
            if (data && isArray(data.multiCardDetails, true)) {
                setSelCountInPopup(getDefaultCount());
            }
        }
    }, [showPopup, data, getDefaultCount]);

    useEffect(() => {

        if (isObject(selectedCount, true)) {
            setFooterBarInfo(info => ({ ...info, ...computedPrice(selectedCount) }));
        }
    }, [selectedCount, computedPrice]);

    useEffect(() => {
        if (data && isArray(data.multiCardDetails, true) && footerBar) {
            let useFulCount = selCountInPopup;
            if (!selCountInPopup) {
                useFulCount = data.multiCardDetails.find(item => item.soldStatus !== 3);
                setSelCountInPopup(useFulCount);
            }
            setFooerBarInfoInPopup(info => ({ ...info || footerBar, ...computedPrice(useFulCount) }));
        }
    }, [data, footerBar, computedPrice, selCountInPopup]);

    useEffect(() => {
        if (!isObject(data, true)) {
            return;
        }
        let btn = data.linkDTOs && data.linkDTOs[0] || {};
        const qrCode = data.qrCode;
        setFooterBarInfo({
            soldPrice: data.soldPrice,
            marketPrice: data.marketPrice,
            checkLogin: btn.loginRequired,
            type: btn.openType,
            icon: btn.icon,
            buttonStyleType: btn.buttonStyleType,
            iconClassName: data.iconClassName,
            wxBtn: qrCode.joinGroupUrl ? {
                link: qrCode.joinGroupUrl,
                text: qrCode.btnTitle
            } : null,
            openUrl: btn.url,
            bindId: 'product-openApp-id',
            label: (isObject(data.activityAdvert, true) && data.activityAdvert.priceTag) ? data.activityAdvert.priceTag : data.btnLabel || '',
            title: <div data-item_id={params.dealCode} dot-event-name="spk_page_btn_click">{btn.title || ''}</div>,
            disable: btn.btnStatus === 0,
            inviteGroupBuyStatus: data.inviteGroupBuyStatus || 1,
            ...computedPrice(selectedCount),
            ...coverConfig || {}
        });
    }, [data, computedPrice, selectedCount, coverConfig]);

    return useMemo(() => {
        // 注意customCallback可以被onClickCallback替代实现相关功能，以规范化事件函数
        const { customCallback } = data || {};
        const { onClickCallback, onCloseCallback, onChangeCallback, popupTitle } = coverConfig || {};
        return isObject(footerBar, true) && <div>
            <FooterBar
                showQuickBtns={!hideQuickBtns}
                styleType="square"
                // showQuickBtns={true}
                className="cbkfe-product-footerBar"
                onClick={(evt) => {
                    if (footerBar.showCountPopup) {
                        setShowPopup(true);
                    }
                    onClickCallback && typeof onClickCallback === 'function' && onClickCallback(evt, 1, footerBar);
                    customCallback && typeof customCallback === 'function' && customCallback(evt, 1, footerBar);
                }}
                buttonStyleType={data && data.buttonStyleType}
                {...footerBar}
            />
            {footerBarInfoInPopup && <PackageCountList
                popup={true}
                noDisable={data.hotelCard || false}
                showPopup={showPopup}
                popupTitle={popupTitle}
                onClose={(evt) => {
                    setShowPopup(false);
                    onCloseCallback && onCloseCallback(evt, 2, footerBarInfoInPopup);
                }}
                defaultId={selCountInPopup && selCountInPopup.itemSkuId}
                onChange={(item) => {
                    setSelCountInPopup(item);
                    onChangeCallback && onChangeCallback(item, 4, footerBarInfoInPopup);
                }}
                list={data.multiCardDetails}
                FooterBar={<FooterBar
                    styleType="square"
                    showQuickBtns={!hideQuickBtns}
                    position="relative"
                    className="cbkfe-product-footerBar"
                    onClick={(evt) => {
                        onClickCallback && onClickCallback(evt, 3, footerBarInfoInPopup);
                    }}
                    buttonStyleType={data && data.buttonStyleType}
                    {...footerBarInfoInPopup}
                    slots={isVip ? null : coverConfig.slots}
                />}
            />}

        </div>;
    }, [footerBar, showPopup, data, footerBarInfoInPopup, selCountInPopup, hideQuickBtns]);
}

export default forwardRef(RenderFooterBar);