import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import './styles/VolumeDiscountCard.scss';
import VolumePricingModal from '../volume-pricing-modal/VolumePricingModal';
import { replacePlaceholders, lowercaseWithUpperFirst } from '../../tools/stringTools';
import { mockEditionsI18nData, mockVolumePricingV2 } from '../../../mocks/product/volumePricing';
import { marketplaceProductDataStore } from '../../store/marketplaceProductData';

const n = createNamespace('VolumeDiscountCard');

const VolumeDiscountCard = ({
    onClick,
    onKeyDown,
    callback,
    component,
    data,
    showVolumeDiscount
}) => {
    const [visible, setVisibility] = useState(false);
    const { marketplaceProductData } = marketplaceProductDataStore();
    const hasVolumePricing = !!Object.keys(marketplaceProductData).length
        && marketplaceProductData?.marketplaceProduct?.externalSource;
    const { title, content, information, linkName } = data?.volumeDiscountPricing
        || mockEditionsI18nData.volumeDiscountPricing;
    const externalSource = marketplaceProductData?.marketplaceProduct?.externalSource;
    const formattedTitle = replacePlaceholders(title, { vendor: lowercaseWithUpperFirst(externalSource) });
    const formattedLinkName = replacePlaceholders(linkName, { vendor: lowercaseWithUpperFirst(externalSource) });
    const parameters = {
        isVisible: visible,
        volumePricingData: hasVolumePricing
            ? marketplaceProductData
            : mockVolumePricingV2,
        data,
        formattedTitle,
        callback: callback || setVisibility
    };
    const renderComponent = () => (component
        ? <component {...parameters} />
        : <VolumePricingModal {...parameters} />
    );

    const toggleVisibility = () => {
        setVisibility(!visible);
    };

    return hasVolumePricing || showVolumeDiscount ? (
        <>
            <div
                {...n('wrapper').props}
                onClick={onClick || toggleVisibility}
                onKeyDown={onKeyDown || toggleVisibility}
                data-testid="volumeDiscountCard"
            >
                <div {...n('info').props}>
                    <div {...n('title').props}>
                        {formattedTitle}
                    </div>
                    <div {...n('content').props}>
                        {content}
                    </div>
                </div>
                <div {...n('contentWrapper').props}>
                    <div {...n('subcontent').props}>
                        {information}
                    </div>
                    <div
                        {...n('link').props}
                    >
                        {formattedLinkName}
                    </div>
                </div>
            </div>
            {renderComponent()}
        </>
    )
        : null;
};

VolumeDiscountCard.schema = () => ({
    marketplaceData: {
        currency: 'config.currency',
        locale: 'locale',
        volumeDiscountPricing: 'application.editions.i18n.volumeDiscountPricing',
        pricingDurationEnum: 'application.editions.i18n.pricingDurationEnum',
        contractDuration: 'application.editions.i18n.contractDuration',
        units: 'application.editions.i18n.units',
        closeLabel: 'nav.primary.i18n.close',
        editionsDataStore: 'application.editions.items'
    }
});

VolumeDiscountCard.propTypes = {
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    callback: PropTypes.func,
    component: PropTypes.func,
    data: PropTypes.object,
    showVolumeDiscount: PropTypes.bool
};

VolumeDiscountCard.defaultProps = {
    onClick: null,
    onKeyDown: null,
    callback: null,
    component: null,
    data: mockEditionsI18nData,
    showVolumeDiscount: false
};


export default VolumeDiscountCard;
