import React, { useCallback } from 'react';
import { scrollTo, browser, loginCheck, isObject } from 'cbkfe-utils';
import { partnerItemShareCount } from './action';
import { QuickBtns } from 'cbkfe-ui';

export default function CpsFooterBar({ info }) {
    if (!isObject(info, true)) {
        return null;
    }
    // 底部按钮点击逻辑 抢购&分享
    // userId可以用来区分用户是否由登录
    const handleButtonEvent = (index, item) => {
        const { hasLogin } = info;
        index === 1 && partnerItemShareCount({ itemCode: info.itemCode });
        if (hasLogin) {
            item.btnStatus ? location.href = item.url : null;
        } else {
            item.btnStatus && loginCheck(location.href);
        }
    };
    let { buttons } = info;
    const dotInfo = {
        'data-item_code': info.itemCode,
        'data-type': info.category === 'food' ? 1 : 2,
        'data-user_identity': info.distributor ? 1 : 2
    };
    return <div className="cps-modules-footerBar">
        {/**  滑动时候的快捷置顶按钮 */}
        <QuickBtns
            removeBtns={['scrollTop']}
            appendBtns={[
                {
                    dom: <img
                        onClick={() => new scrollTo().scrollTo({ positionY: 0 })}
                        style={{ width: '2.3rem' }}
                        src="https://static.caibeike.com/i/e3e691d841f058c5e8b1ce2e80452927-xBzD1z"
                    />,
                    key: 'scrollTop'
                }
            ]} />

        <div className="groupon-bottom-bar">
            <div className="bottom-bar__price">
                <div className="bottom-bar_soldPrice"><span className="bottom-bar_priceUnit">¥</span>{info.soldPrice}</div>
                <div className="bottom-bar_marketPrice">
                    {info && (info.distributor && info.discount) ? (
                        <span className={`bottom-bar__label ${browser.versions.android ? 'android-num' : ''}`}>{info.discount}</span>
                    ) : null}
                    <div className="bottom-bar__priceBox">
                        {info.priceFlag && <span className="bottom-bar__priceLabel">起</span>}
                        {info.marketPrice ? <del className="bottom-bar__del">¥{info.marketPrice}</del> : null}
                    </div>

                </div>
            </div>
            <div className="bottom-bar-btn">
                {buttons && buttons.map((item, index) => {
                    let eventName = index ? 'distribution_detail_page_shrea_click' : 'distribution_detail_page_rtob_click';
                    return <div
                        dot-event-name={eventName}
                        {...dotInfo}
                        className={`
                            buy-btn-item
                            buy-btn 
                            ${buttons.length === 1 ? 'direct' : ''}
                            ${item.btnStatus === 0 ? 'disable-btn' : ''}
                            `}
                        key={index}
                        onClick={() => {
                            handleButtonEvent(index, item);
                        }}>
                        {item.title}<br />
                        {item.subTitle ? (
                            <i className="btn-title">{item.subTitle}</i>
                        ) : null}
                    </div>;
                })}
            </div>
        </div>
        <div className="iphonex" />
    </div>;
}