import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { getUniqId } from '@gravity-ui/uikit';
import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
import ButtonTabs from "../../components/ButtonTabs/ButtonTabs.js";
import Title from "../../components/Title/Title.js";
import { Col, Grid, GridJustifyContent, Row } from "../../gravity-blocks/grid/index.js";
import { block } from "../../utils/index.js";
import { TabContent } from "./TabContent/TabContent.js";
import './Tabs.css';
const b = block('tabs-block');
export 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]: 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 (_jsx(Grid, { children: _jsxs(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated, children: [_jsx(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }), _jsx(Row, { justifyContent: centered ? GridJustifyContent.Center : undefined, children: _jsx(Col, { sizes: tabsColSizes, children: _jsx(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }), getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }) }) }), items.map((tabData) => {
                    const { tabName } = tabData;
                    return (_jsx(TabContent, { tabData: tabData, isActive: tabName === activeTab, isReverse: isReverse, contentSize: contentSize, centered: centered, play: play, getTabElementId: getTabElementId, getTabContentElementId: getTabContentElementId }, tabName));
                })] }) }));
};
export default TabsBlock;
//# sourceMappingURL=Tabs.js.map
