import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Col, Grid, Row } from "../../gravity-blocks/grid/index.js";
import { Content } from "../../sub-blocks/index.js";
import { block } from "../../utils/index.js";
import { sanitizeMicrodata } from "../../utils/microdata.js";
import { QuestionBlockItem } from "./QuestionBlockItem/QuestionBlockItem.js";
import './Questions.css';
const b = block('QuestionsBlock');
const QuestionsBlock = (props) => {
    const { title, text, additionalInfo, links, buttons, items, list } = props;
    const [opened, setOpened] = React.useState([0]);
    const toggleItem = (index, itemOnClick) => {
        let newState;
        if (opened.includes(index)) {
            newState = opened.filter((itemIndex) => itemIndex !== index);
        }
        else {
            newState = [...opened, index];
        }
        if (itemOnClick) {
            itemOnClick(index, !opened.includes(index));
        }
        setOpened(newState);
    };
    const faqMicrodataScript = React.useMemo(() => {
        try {
            const json = JSON.stringify({
                '@context': 'https://schema.org',
                '@type': 'FAQPage',
                mainEntity: items.map((item) => ({
                    '@type': 'Question',
                    name: sanitizeMicrodata(item.title),
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: sanitizeMicrodata(item.text),
                    },
                })),
            });
            return _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } });
        }
        catch (error) {
            /*eslint-disable no-console */
            console.warn('Problem with FAQ microdata', error);
            return null;
        }
    }, [items]);
    return (_jsxs("div", { className: b(), children: [faqMicrodataScript, _jsx(Grid, { 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', onClick: itemOnClick, }, index) => {
                                const isOpened = opened.includes(index);
                                const onClick = () => toggleItem(index, itemOnClick);
                                return (_jsx(QuestionBlockItem, { title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }, itemTitle));
                            }) })] }) })] }));
};
export default QuestionsBlock;
//# sourceMappingURL=Questions.js.map
