import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Label } from '@gravity-ui/uikit';
import { YFMWrapper } from "../../../components/index.js";
import { StylesContext } from "../../../gravity-blocks/context/stylesContext/index.js";
import { PriceLabelColor, } from "../../../models/index.js";
import { block } from "../../../utils/index.js";
import './PriceDescription.css';
const b = block('price-description');
const LabelColorsMapping = {
    [PriceLabelColor.BLUE]: 'info',
    [PriceLabelColor.GREEN]: 'success',
    [PriceLabelColor.YELLOW]: 'warning',
    [PriceLabelColor.PURPLE]: 'normal',
    [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);
    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 (_jsx(Label, { className: b('label', { size: labelSize }), theme: labelColor, size: labelSize, children: labelTitle }));
    }, [descriptionSize, label, labelsDefaultText]);
    const titleElement = React.useMemo(() => {
        return (_jsxs("div", { className: b('title', { size: titleSize }), children: [_jsx("div", { className: b('main-title', { color: colorTitle }), children: title }), _jsx("div", { className: b('detailed-title', { size: descriptionSize }), children: detailedTitle })] }));
    }, [colorTitle, descriptionSize, detailedTitle, title, titleSize]);
    return (_jsxs("div", { className: b(null, className), ref: descriptionRef, children: [labelElement, titleElement, _jsx("div", { className: b('description', { size: descriptionSize }), children: _jsx(YFMWrapper, { content: description, modifiers: { constructor: true } }) })] }));
};
export default PriceDescription;
//# sourceMappingURL=PriceDescription.js.map
