import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import chunk from "lodash/chunk.js";
import { CardBase } from "../../../components/index.js";
import { BREAKPOINTS } from "../../../constants.js";
import { Col, Grid, GridColumnSize, Row } from "../../../gravity-blocks/grid/index.js";
import { block } from "../../../utils/index.js";
import './CombinedPriceDetailed.css';
const b = block('combined-price-detailed-block');
const CombinedPricesGroupSize = {
    [GridColumnSize.Sm]: 1,
    [GridColumnSize.Md]: 2,
    [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 >= BREAKPOINTS.lg) {
            setGroupItemsSize(numberGroupItems);
        }
        else if (BREAKPOINTS.lg > windowWidth && windowWidth >= BREAKPOINTS.md) {
            setGroupItemsSize(CombinedPricesGroupSize[GridColumnSize.Lg]);
        }
        else if (BREAKPOINTS.md > windowWidth && windowWidth >= BREAKPOINTS.sm) {
            setGroupItemsSize(CombinedPricesGroupSize[GridColumnSize.Md]);
        }
        else {
            setGroupItemsSize(CombinedPricesGroupSize[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] = (_jsx(Col, { children: price && getDescriptionComponent(price) }, `card_${id}`));
            detailsComponents[id] = (_jsx(Col, { className: price ? '' : b('empty-column'), children: price && getDetailsComponent(price.items) }, `details_${id}`));
        }
        return (_jsxs(React.Fragment, { children: [_jsx("div", { children: descriptionComponents }), _jsx("div", { className: b('description', { delimiter: useMixedView }), children: detailsComponents })] }));
    };
    const chunkedItems = chunk(items, groupItemsSize);
    return (_jsx(CardBase, { className: b(), border: border, analyticsEvents: analyticsEvents, children: _jsx(CardBase.Content, { children: _jsx(Grid, { children: chunkedItems.map((item, id) => {
                    return (_jsx(Row, { className: b('row'), children: getPrice(item) }, id));
                }) }) }) }));
};
export default CombinedPriceDetailed;
//# sourceMappingURL=CombinedPriceDetailed.js.map
