"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const React = __importStar(require("react"));
const classnames_1 = __importDefault(require("classnames"));
{
    TabsProps;
}
from;
'./types';
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const Tabs_1 = __importDefault(require("@material-ui/core/Tabs"));
const Tab_1 = __importDefault(require("@material-ui/core/Tab"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const styles_1 = __importDefault(require("./styles"));
class TabsNavigation extends React.Component {
    constructor(props) {
        super(props);
        this.changeActiveIndex = index => {
            this.setState({ activeIndex: index });
            if (this.props.onChange) {
                this.props.onChange(index);
            }
        };
        this._handleChange = (event, value) => {
            this.setState({ activeIndex: value });
            if (this.props.onChange) {
                this.props.onChange(value);
            }
        };
        this.state = {
            activeIndex: props.activeIndex,
        };
    }
    componentDidUpdate(prevProps) {
        const props = this.props;
        if (props.activeIndex !== prevProps.activeIndex) {
            this.setState({
                activeIndex: props.activeIndex,
            });
        }
    }
    _renderTabs() {
        let { tabs, classes, tabTheme } = this.props;
        return (React.createElement(Tabs_1.default, { value: this.state.activeIndex, onChange: this._handleChange, classes: {
                root: classnames_1.default(classes.tabsWrapper, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
                indicator: classnames_1.default(classes.tabsIndicator, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
            } }, tabs.map((tab, index) => (React.createElement(Tab_1.default, { classes: {
                root: classnames_1.default(classes.tabWrapper, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
                textColorInherit: classnames_1.default(classes.textColorInherit, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
                selected: classnames_1.default(classes.selectedTab, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
                label: classnames_1.default(classes.label, {
                    secondary: tabTheme === 'secondary',
                    tertiary: tabTheme === 'tertiary',
                }),
            }, "data-test": `tab-${tab.label}`, label: tab.label, key: index, onClick: tab.onClick })))));
    }
    render() {
        let { classes } = this.props;
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement("div", { className: classes.component }, this._renderTabs())));
    }
}
TabsNavigation.defaultProps = {
    tabTheme: 'secondary',
    onChange: () => { },
    tabs: [],
};
exports.default = withStyles_1.default(styles_1.default)(TabsNavigation);
//# sourceMappingURL=index.js.map