"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsBlock = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock.js"));
const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs.js"));
const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title.js"));
const grid_1 = require("../../gravity-blocks/grid/index.js");
const utils_1 = require("../../utils/index.js");
const TabContent_1 = require("./TabContent/TabContent.js");
const b = (0, utils_1.block)('tabs-block');
const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
    const [activeTab, setActiveTab] = React.useState(items[0].tabName);
    const [play, setPlay] = React.useState(false);
    const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
    const isReverse = direction === 'content-media';
    const tabIds = React.useMemo(() => items.reduce((acc, { tabName }) => Object.assign(acc, { [tabName]: (0, uikit_1.getUniqId)() }), {}), [items]);
    const getTabElementId = (tabId) => `${tabIds[tabId]}`;
    const getTabContentElementId = (tabId) => `${tabIds[tabId]}-content`;
    const onSelectTab = React.useCallback((tabId, e) => {
        setActiveTab(tabId);
        e.currentTarget.scrollIntoView({
            inline: 'center',
            behavior: 'smooth',
            block: 'nearest',
        });
    }, []);
    return ((0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated, children: [(0, jsx_runtime_1.jsx)(Title_1.default, { title: title, subtitle: description, className: b('title', { centered: centered }) }), (0, jsx_runtime_1.jsx)(grid_1.Row, { justifyContent: centered ? grid_1.GridJustifyContent.Center : undefined, children: (0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: tabsColSizes, children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }), getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }) }) }), items.map((tabData) => {
                    const { tabName } = tabData;
                    return ((0, jsx_runtime_1.jsx)(TabContent_1.TabContent, { tabData: tabData, isActive: tabName === activeTab, isReverse: isReverse, contentSize: contentSize, centered: centered, play: play, getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }, tabName));
                })] }) }));
};
exports.TabsBlock = TabsBlock;
exports.default = exports.TabsBlock;
//# sourceMappingURL=Tabs.js.map
