"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const components_1 = require("../../../components/index.js");
const stylesContext_1 = require("../../../gravity-blocks/context/stylesContext/index.js");
const models_1 = require("../../../models/index.js");
const utils_1 = require("../../../utils/index.js");
const b = (0, utils_1.block)('price-description');
const LabelColorsMapping = {
    [models_1.PriceLabelColor.BLUE]: 'info',
    [models_1.PriceLabelColor.GREEN]: 'success',
    [models_1.PriceLabelColor.YELLOW]: 'warning',
    [models_1.PriceLabelColor.PURPLE]: 'normal',
    [models_1.PriceLabelColor.RED]: 'dnager',
};
const LabelSizeMap = {
    l: 's',
    m: 's',
    sm: 's',
    s: 'xs',
    xs: 'xs',
};
const PriceDescription = (props) => {
    const { title, detailedTitle = '', description, titleSize = 'l', descriptionSize = 'm', colorTitle = 'cornflower', label, labelsDefaultText, className, } = props;
    const descriptionRef = React.useRef(null);
    const { pricesDetailedDescriptionHeight, setStyles } = React.useContext(stylesContext_1.StylesContext);
    const setDescriptionHeight = React.useCallback(() => {
        if (!descriptionRef || !descriptionRef.current) {
            return;
        }
        const descriptionChildren = descriptionRef.current?.children;
        if (!descriptionChildren) {
            return;
        }
        const childrenHeight = [...descriptionChildren].reduce((result, element) => result + element.clientHeight, 0);
        if (pricesDetailedDescriptionHeight === undefined ||
            Number(pricesDetailedDescriptionHeight) < childrenHeight) {
            setStyles({ pricesDetailedDescriptionHeight: childrenHeight.toString() });
        }
        else if (childrenHeight < Number(pricesDetailedDescriptionHeight)) {
            descriptionRef.current.style.height = `${pricesDetailedDescriptionHeight}px`;
        }
    }, [pricesDetailedDescriptionHeight, setStyles]);
    React.useEffect(() => {
        setDescriptionHeight();
        window.addEventListener('resize', setDescriptionHeight, { passive: true });
        return () => window.removeEventListener('resize', setDescriptionHeight);
    }, [setDescriptionHeight]);
    const labelElement = React.useMemo(() => {
        if (!label) {
            return null;
        }
        const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
        const labelColor = (LabelColorsMapping[label.color] || 'unknown');
        const labelSize = LabelSizeMap[label.size || descriptionSize];
        return ((0, jsx_runtime_1.jsx)(uikit_1.Label, { className: b('label', { size: labelSize }), theme: labelColor, size: labelSize, children: labelTitle }));
    }, [descriptionSize, label, labelsDefaultText]);
    const titleElement = React.useMemo(() => {
        return ((0, jsx_runtime_1.jsxs)("div", { className: b('title', { size: titleSize }), children: [(0, jsx_runtime_1.jsx)("div", { className: b('main-title', { color: colorTitle }), children: title }), (0, jsx_runtime_1.jsx)("div", { className: b('detailed-title', { size: descriptionSize }), children: detailedTitle })] }));
    }, [colorTitle, descriptionSize, detailedTitle, title, titleSize]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), ref: descriptionRef, children: [labelElement, titleElement, (0, jsx_runtime_1.jsx)("div", { className: b('description', { size: descriptionSize }), children: (0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: description, modifiers: { constructor: true } }) })] }));
};
exports.default = PriceDescription;
//# sourceMappingURL=PriceDescription.js.map
