import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { AnimateBlock, Title } from "../../components/index.js";
import ButtonTabs from "../../components/ButtonTabs/ButtonTabs.js";
import { ConstructorItem } from "../../containers/PageConstructor/components/ConstructorItem/index.js";
import { Col, Grid, Row } from "../../gravity-blocks/grid/index.js";
import { useAnalytics } from "../../gravity-blocks/hooks/index.js";
import { block, getBlockKey } from "../../utils/index.js";
import { default as CardLayoutBlock } from "../CardLayout/CardLayout.js";
import { i18n } from "./i18n/index.js";
import './FilterBlock.css';
const b = block('filter-block');
const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items = [], colSizes, centered, animated, }) => {
    const handleAnalytics = useAnalytics();
    const tabButtons = React.useMemo(() => {
        let allButton;
        if (allTag) {
            if (typeof allTag === 'boolean') {
                allButton = {
                    id: null,
                    title: 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 (_jsx(AnimateBlock, { className: b(), animate: animated, children: _jsxs(Grid, { children: [title && (_jsx(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && (_jsx(Row, { children: _jsx(Col, { children: _jsx(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), _jsx(Row, { className: b('block-container'), children: _jsx(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map((card, index) => {
                            const key = getBlockKey(card, index);
                            return _jsx(ConstructorItem, { data: card, blockKey: index }, key);
                        }) }) })] }) }));
};
export default FilterBlock;
//# sourceMappingURL=FilterBlock.js.map
