"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 components_1 = require("../../components/index.js");
const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs.js"));
const ConstructorItem_1 = require("../../containers/PageConstructor/components/ConstructorItem/index.js");
const grid_1 = require("../../gravity-blocks/grid/index.js");
const hooks_1 = require("../../gravity-blocks/hooks/index.js");
const utils_1 = require("../../utils/index.js");
const CardLayout_1 = tslib_1.__importDefault(require("../CardLayout/CardLayout.js"));
const i18n_1 = require("./i18n/index.js");
const b = (0, utils_1.block)('filter-block');
const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items = [], colSizes, centered, animated, }) => {
    const handleAnalytics = (0, hooks_1.useAnalytics)();
    const tabButtons = React.useMemo(() => {
        let allButton;
        if (allTag) {
            if (typeof allTag === 'boolean') {
                allButton = {
                    id: null,
                    title: (0, i18n_1.i18n)('label-all-tag'),
                };
            }
            else if (typeof allTag === 'string') {
                allButton = {
                    id: null,
                    title: allTag,
                };
            }
            else if (typeof allTag === 'object') {
                allButton = {
                    id: null,
                    title: allTag.label,
                    analyticsEvent: allTag.analyticsEvent,
                };
            }
        }
        const otherButtons = tags &&
            tags.map((tag) => ({
                id: tag.id,
                title: tag.label,
                analyticsEvent: tag.analyticsEvent,
            }));
        return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];
    }, [allTag, tags]);
    const [selectedTag, setSelectedTag] = React.useState(tabButtons.length ? tabButtons[0].id : null);
    const actualTag = React.useMemo(() => {
        return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)
            ? tabButtons[0].id
            : selectedTag;
    }, [tabButtons, selectedTag]);
    const cards = React.useMemo(() => {
        const itemsToShow = actualTag
            ? items.filter((item) => item.tags.includes(actualTag))
            : items;
        return itemsToShow.map((item) => item.card);
    }, [actualTag, items]);
    const handleSelectTab = React.useCallback((tabId) => {
        setSelectedTag(tabId);
        const tabButton = tabButtons.find((tab) => tab.id === tabId);
        if (tabButton?.analyticsEvent) {
            handleAnalytics(tabButton.analyticsEvent);
        }
    }, [tabButtons, handleAnalytics]);
    return ((0, jsx_runtime_1.jsx)(components_1.AnimateBlock, { className: b(), animate: animated, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && ((0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('block-container'), children: (0, jsx_runtime_1.jsx)(CardLayout_1.default, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
                            const key = (0, utils_1.getBlockKey)(card, index);
                            return (0, jsx_runtime_1.jsx)(ConstructorItem_1.ConstructorItem, { data: card, blockKey: index }, key);
                        }) }) })] }) }));
};
exports.default = FilterBlock;
//# sourceMappingURL=FilterBlock.js.map
