/* eslint-disable complexity */
import React from 'react';
import { QuickBtns, Button } from 'cbkfe-ui';
import { mb_open } from 'cbkfe-bridge';
import { browser, queryCode } from 'cbkfe-utils';
import Price from '../Price';
import './style';

let isWx = browser.versions.wechat;
const hideJoinGroup = queryCode("hideJoinGroup");
// hideJoinGroup 控制微信中的微信按钮是否显示
if(hideJoinGroup === 'true' && browser.versions.wechat) {
    isWx = false;
}

// 该字段来源于 url, 为处理特殊商品
let isShowButtonTitle = queryCode("isShowButtonTitle");

export default function FooterBar(props) {
    let {
        className = '',
        iconClassName = '',
        disable = false,
        title = '',
        icon = '',
        buttonStyleType = 0,
        subTitle = '',
        position = 'fixed',
        showQuickBtns,
        appendBtns = [],
        onClick = function () { },
        openUrl,
        type,
        styleType = 'circle', // square:有二维码按钮的样式，是方的   circle: 只有一个按钮的时候圆的
        bindId,
        checkLogin,
        unFixX = false,
        slots = {},
        wxBtn,
        appendBtn = null,
        inviteGroupBuyStatus = 1,  // 拼场状态详情页面 1是有钱状态（显示价格+购买按钮）  2是没钱状态的（只显示购买按钮）
        isSubscriptionReminder = false, // 按钮是否为订阅提醒状态
    } = props;

    const showWxBtn = wxBtn && isWx;
    return <div style={{ position: position }}
        className={`
    cbkfe-bottom-container 
    cbkfe-bottom-bar--${position} 
    cbkfe-bottom-bar--${styleType} 
    cbkfe-bottom-bar--${disable ? 'disable' : ''}
    ${className}
    `}
    >
        {inviteGroupBuyStatus === 1 ? (
            <React.Fragment>
                {showQuickBtns && <QuickBtns appendBtns={appendBtns} />}
                {(slots && slots.middleBar) ? slots.middleBar : null}
                <div className="cbkfe-bottom-bar">
                    <div className="cbkfe-bottom-barPrice">{props.soldPrice && <Price {...props} forceMarketPrice={true} />}</div>
                    <div className="cbkfe-bottom-btnbox">
                        {showWxBtn && <div onClick={e => {
                            e.stopPropagation();
                            wxBtn.link && mb_open(wxBtn.link);
                        }} className="cbkfe-footBar-wxBtn">
                            <img className="footBar-wxBtn__img" src="https://static.caibeike.com/i/407ab9aec0ed254ae7b753702adb5fde-bB82nI" />
                            {hideJoinGroup && hideJoinGroup === 'true' ? null : <span className="footBar-wxBtn__wechatText">{wxBtn.text || 'VIP微信群'}</span>}
                        </div>}
                        {appendBtn}
                        <Button
                            icon={icon}
                            text={<div className={`bottom-bar__grouponText bottom-bar__grouponText--${showWxBtn ? 'col' : 'row'}`}>
                                {
                                    isShowButtonTitle === 'true' ? <span>一键开抢</span> : <React.Fragment>
                                        <span>{title || '一键开团'}</span>
                                        {subTitle && <span className="bottom-bar__subTitle">{subTitle}</span>}
                                    </React.Fragment>
                                }
                            </div>}
                            onClick={onClick}
                            checkLogin={checkLogin}
                            openUrl={openUrl}
                            type={type}
                            disabled={disable}
                            bindId={bindId}
                            iconClassName={iconClassName}
                            isSubscriptionReminder={isSubscriptionReminder}
                            className={`bottom-bar__grouponBtn ${disable ? 'grouponBtn--disabled' : ''} ${buttonStyleType === 4 ? 'grouponBtn--rob' : ''} ${buttonStyleType === 4 && showWxBtn ? 'grouponBtn--rob-wx' : ''} ${buttonStyleType === 5 ? 'bottom-bar__memberfree' : ''}`}
                        />
                    </div>
                </div>
            </React.Fragment>
        ) : (
            <React.Fragment>
                {showQuickBtns && <QuickBtns appendBtns={appendBtns} />}
                {(slots && slots.middleBar) ? slots.middleBar : null}
                <div className="cbkfe-bottom-bar cbkfe-bottom-bar_grouponBuyType">
                    <div className="cbkfe-bottom-btnbox">
                        {showWxBtn && <div onClick={e => {
                            e.stopPropagation();
                            wxBtn.link && mb_open(wxBtn.link);
                        }} className="cbkfe-footBar-wxBtn">
                            <img className="footBar-wxBtn__img" src="https://static.caibeike.com/i/407ab9aec0ed254ae7b753702adb5fde-bB82nI" />
                            {hideJoinGroup && hideJoinGroup === 'true' ? null : <span className="footBar-wxBtn__wechatText">{wxBtn.text || 'VIP微信群'}</span>}
                        </div>}
                        {appendBtn}
                        <Button
                            icon={icon}
                            text={<div className={`bottom-bar__grouponText bottom-bar__grouponText--${showWxBtn ? 'col' : 'row'}`}>
                                {
                                    isShowButtonTitle === 'true' ? <span>一键开抢</span> : <React.Fragment>
                                        <span>{title || '一键开团'}</span>
                                        {subTitle && <span className="bottom-bar__subTitle">{subTitle}</span>}
                                    </React.Fragment>
                                }
                            </div>}
                            onClick={onClick}
                            checkLogin={checkLogin}
                            openUrl={openUrl}
                            type={type}
                            disabled={disable}
                            bindId={bindId}
                            iconClassName={iconClassName}
                            isSubscriptionReminder={isSubscriptionReminder}
                            className={`bottom-bar__grouponBtn ${disable ? 'grouponBtn--disabled' : null} ${buttonStyleType === 4 ? 'grouponBtn--rob' : ''} ${buttonStyleType === 4 && showWxBtn ? 'grouponBtn--rob-wx' : ''} ${buttonStyleType === 5 ? 'bottom-bar__memberfree' : ''}`}
                        />
                    </div>
                </div>
            </React.Fragment>
        )}
        {!unFixX && <div className="iphonex" />}
    </div>;
}