import React, { useState, useMemo } from 'react';
import RuleMask from './RuleMask';
import { isObject } from 'cbkfe-utils';


export default function CpsTitle({ info, itemTitle }) {
    const [showMask, setShowMask] = useState(false);

    return useMemo(() => {
        const dotInfo = {
            'data-item_code': info.itemCode,
            'data-type': info.category === 'food' ? 1 : 2,
            'data-user_identity': info.distributor ? 1 : 2
        };
        if (!isObject(info, true)) { return null; }
        return <div className={`cps-modules__title cps-modules__title--${info.distributor ? 'share' : ''}`}>
            <span className="groupon-product__title"
                style={!info.distributor ? { maxWidth: 'unset' } : null}
            >{itemTitle}</span>
            {info.distributor ? (
                <p className="earn-rule"
                    dot-event-name="distribution_detail_page_shenter_click"
                    {...dotInfo}
                    onClick={() => setShowMask(true)}
                >{'分享\n赚钱'}<i className="iconfont icon--arrow product-appoint__arrow" /></p>
            ) : null}
            <RuleMask dotInfo={dotInfo} showEarnRuleMask={showMask} closeMask={() => setShowMask(false)} />
        </div>;
    }, [showMask, info, itemTitle]);
}