import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import './styles/VolumePricing.scss';
import Badge from '../badge/Badge';
import Pricing from '../pricing/Pricing';
import { priceFormatter } from '../../tools/priceFormatter';
import { replacePlaceholders } from '../../tools/stringTools';

const n = createNamespace('VolumePricing');

const getFormattedContract = (pricingDuration, contractDuration, minimumServiceLength) => {
    if (minimumServiceLength === null) { return ''; }
    switch (pricingDuration) {
        case 'DAILY':
            return replacePlaceholders(contractDuration?.daily, { 0: minimumServiceLength });
        case 'MONTHLY':
            return replacePlaceholders(contractDuration?.monthly, { 0: minimumServiceLength });
        case 'YEARLY':
        case 'TWO_YEARS':
        case 'THREE_YEARS':
            return replacePlaceholders(contractDuration?.yearly, { 0: minimumServiceLength });
        default:
            return '';
    }
};

const VolumePricing = ({ price, data }) => {
    const { priceBookName, priceLevel, unitFees } = price?.[0]?.price || [];
    const { unit } = unitFees?.[0] || {};
    const {
        currency,
        locale,
        pricingDurationEnum,
        units,
        contractDuration
    } = data;

    const localizedUnits = units?.label || unit;

    const contractPricing = () => price.map(contracts => {
        // eslint-disable-next-line no-unsafe-optional-chaining
        const { finalPrice } = contracts?.price?.unitFees?.[0]?.priceRanges?.[0];
        const { contract: { minimumServiceLength }, pricingDuration } = contracts || { contracts: {} };
        const [symbol, formattedPrice] = priceFormatter(locale, currency, finalPrice);
        const { label = pricingDuration } = pricingDurationEnum?.[pricingDuration] || {};
        const formattedContract = getFormattedContract(pricingDuration, contractDuration, minimumServiceLength);

        return (
            <div key={contracts.id}>
                <div {...n('price').props}>
                    <Pricing
                        price={formattedPrice}
                        unit={localizedUnits}
                        frequency={label}
                        symbol={symbol}
                        priceExtraClass="volumePricingValue"
                        priceExtraSuffixClass="volumePricingSuffix"
                        uppercaseFirstLetter
                    />
                </div>
                {formattedContract && (
                    <Badge
                        // TBD: exact match value no present in the given mock response
                        label={formattedContract}
                        type="default"
                        className="volumePricingPeriodBadge"
                    />
                )}
            </div>
        );
    });

    return (
        <div {...n('wrapper').props}>
            <div {...n('level').props}>
                {priceBookName}
            </div>
            <Badge
                // TBD: temporary placeholder since I could not find equivalent value in the mocks
                label={`${priceLevel} ${localizedUnits}`}
                className="volumePricingBadge"
            />
            {contractPricing()}
        </div>
    );
};

VolumePricing.propTypes = {
    price: PropTypes.array,
    data: PropTypes.object
};

VolumePricing.defaultProps = {
    price: [],
    data: {
        currency: ''
    }
};

export default VolumePricing;
