import React from 'react';
import Text from '../Text';
import { dataHooks } from './constants';
import Tab from './Tab';
import { st, classes, vars } from './CardFolderTabs.st.css.js';
import { withFocusable } from '../common/Focusable';
const tabButton = ({ className, id, name, disabled, selected, maxTabWidth, onTabChange, focusableOnFocus, focusableOnBlur, fluid, ellipsis, size, beforeSelected, afterSelected, }) => {
    return (React.createElement("button", { "data-hook": dataHooks.tabButton(id), className: st(classes.button, {
            selected,
            disabled,
            fluid,
            beforeSelected,
            afterSelected,
        }, className), style: fluid ? {} : { [vars['maxWidth']]: maxTabWidth }, onClick: () => onTabChange(id), disabled: disabled, key: id, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
        React.createElement(Text, { dataHook: dataHooks.tabText(id), ellipsis: ellipsis, className: classes.buttonText, size: size }, name)));
};
const TabButton = withFocusable(tabButton);
class CardFolderTabs extends React.PureComponent {
    render() {
        const { dataHook, className, children, activeId, maxTabWidth, onTabChange, fluid, ellipsis, size, } = this.props;
        const cardFolderTabs = Array.isArray(children) ? children : [children];
        const selectedTabIndex = cardFolderTabs.findIndex(tab => activeId === tab.props.id);
        return (React.createElement("div", { className: st(classes.root, { fluid }, className), "data-hook": dataHook },
            React.createElement("div", { "data-hook": dataHooks.header, className: classes.headerWrapper }, cardFolderTabs.map(({ props }, index) => (React.createElement(TabButton, { key: props.id, ...props, selected: activeId === props.id, beforeSelected: index === selectedTabIndex - 1, afterSelected: index === selectedTabIndex + 1, maxTabWidth: maxTabWidth, fluid: fluid, ellipsis: ellipsis, size: size, onTabChange: typeof onTabChange === 'function' ? onTabChange : undefined })))),
            React.createElement("div", { "data-hook": dataHooks.content, className: classes.tabContentWrapper }, cardFolderTabs.filter(tab => activeId === tab.props.id))));
    }
}
CardFolderTabs.displayName = 'CardFolderTabs';
CardFolderTabs.defaultProps = {
    maxTabWidth: '138px',
    ellipsis: true,
    size: 'medium',
    fluid: false,
};
CardFolderTabs.Tab = Tab;
export default CardFolderTabs;
//# sourceMappingURL=CardFolderTabs.js.map