"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 chunk_1 = tslib_1.__importDefault(require("lodash/chunk.js"));
const components_1 = require("../../../components/index.js");
const constants_1 = require("../../../constants.js");
const grid_1 = require("../../../gravity-blocks/grid/index.js");
const utils_1 = require("../../../utils/index.js");
const b = (0, utils_1.block)('combined-price-detailed-block');
const CombinedPricesGroupSize = {
    [grid_1.GridColumnSize.Sm]: 1,
    [grid_1.GridColumnSize.Md]: 2,
    [grid_1.GridColumnSize.Lg]: 3,
};
const CombinedPriceDetailed = (props) => {
    const { items, numberGroupItems, border, useMixedView, getDescriptionComponent, getDetailsComponent, analyticsEvents, } = props;
    const [groupItemsSize, setGroupItemsSize] = React.useState(numberGroupItems);
    const updateGroupItemsSize = React.useCallback((windowWidth) => {
        if (windowWidth >= constants_1.BREAKPOINTS.lg) {
            setGroupItemsSize(numberGroupItems);
        }
        else if (constants_1.BREAKPOINTS.lg > windowWidth && windowWidth >= constants_1.BREAKPOINTS.md) {
            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Lg]);
        }
        else if (constants_1.BREAKPOINTS.md > windowWidth && windowWidth >= constants_1.BREAKPOINTS.sm) {
            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Md]);
        }
        else {
            setGroupItemsSize(CombinedPricesGroupSize[grid_1.GridColumnSize.Sm]);
        }
    }, [numberGroupItems]);
    React.useEffect(() => {
        function handleResize() {
            updateGroupItemsSize(window.innerWidth);
        }
        handleResize();
        window.addEventListener('resize', handleResize, { passive: true });
        return () => window.removeEventListener('resize', handleResize);
    }, [updateGroupItemsSize]);
    const getPrice = (groupPrices) => {
        const descriptionComponents = Array(groupItemsSize);
        const detailsComponents = Array(groupItemsSize);
        for (let id = 0; id < groupItemsSize; id++) {
            const price = groupPrices[id];
            descriptionComponents[id] = ((0, jsx_runtime_1.jsx)(grid_1.Col, { children: price && getDescriptionComponent(price) }, `card_${id}`));
            detailsComponents[id] = ((0, jsx_runtime_1.jsx)(grid_1.Col, { className: price ? '' : b('empty-column'), children: price && getDetailsComponent(price.items) }, `details_${id}`));
        }
        return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: descriptionComponents }), (0, jsx_runtime_1.jsx)("div", { className: b('description', { delimiter: useMixedView }), children: detailsComponents })] }));
    };
    const chunkedItems = (0, chunk_1.default)(items, groupItemsSize);
    return ((0, jsx_runtime_1.jsx)(components_1.CardBase, { className: b(), border: border, analyticsEvents: analyticsEvents, children: (0, jsx_runtime_1.jsx)(components_1.CardBase.Content, { children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: chunkedItems.map((item, id) => {
                    return ((0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('row'), children: getPrice(item) }, id));
                }) }) }) }));
};
exports.default = CombinedPriceDetailed;
//# sourceMappingURL=CombinedPriceDetailed.js.map
