import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Col, Row } from "../../gravity-blocks/grid/index.js";
import { Content } from "../../sub-blocks/index.js";
import { block } from "../../utils/index.js";
import { FoldableListBlockItem } from "./FoldableListBlockItem/FoldableListBlockItem.js";
import './FoldableList.css';
const b = block('FoldableList');
const FoldableListBlock = (props) => {
    const { title, text, additionalInfo, links, buttons, items, list } = props;
    const [opened, setOpened] = React.useState([0]);
    const toggleItem = (index) => {
        let newState;
        if (opened.includes(index)) {
            newState = opened.filter((itemIndex) => itemIndex !== index);
        }
        else {
            newState = [...opened, index];
        }
        setOpened(newState);
    };
    return (_jsx("div", { className: b(), itemScope: true, children: _jsxs(Row, { children: [_jsx(Col, { sizes: { all: 12, md: 4 }, children: _jsx("div", { className: b('title'), children: _jsx(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, colSizes: { all: 12, md: 12 } }) }) }), _jsx(Col, { sizes: { all: 12, md: 8 }, role: 'list', children: items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                        const isOpened = opened.includes(index);
                        const onClick = () => toggleItem(index);
                        return (_jsx(FoldableListBlockItem, { title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }, itemTitle));
                    }) })] }) }));
};
export default FoldableListBlock;
//# sourceMappingURL=FoldableList.js.map
