var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import './Tabs.scss';
// Accessibility code adapted from
// https://gist.github.com/jonathantneal/435478e415bfe4f54d06
export var Tab = function (_a) {
    var children = _a.children;
    return children;
};
Tab.propTypes = {
    children: PropTypes.node.isRequired,
    label: PropTypes.node.isRequired,
    labelClassName: PropTypes.string,
    title: PropTypes.string,
};
Tab.defaultProps = {
    title: '',
    labelClassName: '',
};
var TabLabel = function (_a) {
    var children = _a.children, className = _a.className, contentId = _a.contentId, id = _a.id, isSelected = _a.isSelected, onClick = _a.onClick, title = _a.title;
    return React.createElement("li", { className: [
            'ddb-tabs__tab',
            className,
        ]
            .filter(Boolean)
            .join(' '), role: "presentation" },
        React.createElement("a", { href: "#" + contentId, id: id, onClick: onClick, title: title, role: "tab", "aria-controls": contentId, "aria-selected": isSelected }, children));
};
TabLabel.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    contentId: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    isSelected: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    title: PropTypes.string,
};
TabLabel.defaultProps = {
    className: '',
    title: '',
};
var Tabs = /** @class */ (function (_super) {
    __extends(Tabs, _super);
    function Tabs(props) {
        var _this = _super.call(this, props) || this;
        _this.getTabContentId = function (key) {
            return _this.props.id + "_content_" + key;
        };
        _this.getTabId = function (key) {
            return _this.props.id + "_tab_" + key;
        };
        _this.handleTabClick = function (index, event) {
            event.preventDefault();
            _this.setState({
                selectedTabIndex: index,
            });
            if (_this.props.onChangeTab) {
                _this.props.onChangeTab(index);
            }
        };
        _this.isTabSelected = function (tabIndex) { return _this.state.selectedTabIndex === tabIndex; };
        _this.state = {
            selectedTabIndex: props.selectedTabIndex,
        };
        return _this;
    }
    Tabs.prototype.render = function () {
        var _this = this;
        var children = React.Children.toArray(this.props.children);
        return (React.createElement("div", { className: [
                'ddb-tabs',
                this.props.className,
            ]
                .filter(Boolean)
                .join(' ') },
            React.createElement("ul", { className: "ddb-tabs__tabs", role: "tablist" }, children.map(function (child, index) {
                return React.createElement(TabLabel, { key: _this.getTabId(index), className: "ddb-tabs__tabs-tab " + child.props.labelClassName, contentId: _this.getTabContentId(index), id: _this.getTabId(index), isSelected: _this.isTabSelected(index), onClick: _this.handleTabClick.bind(_this, index), title: child.props.title }, child.props.label);
            })),
            children.map(function (child, index) {
                return React.createElement("section", { key: _this.getTabContentId(index), className: "ddb-tabs__content", id: _this.getTabContentId(index), "aria-labelledby": _this.getTabId(index), hidden: !_this.isTabSelected(index), role: "tabpanel" }, child);
            })));
    };
    Tabs.propTypes = {
        children: PropTypes.arrayOf(PropTypes.node).isRequired,
        id: PropTypes.string.isRequired,
        className: PropTypes.string,
        onChangeTab: PropTypes.func,
        selectedTabIndex: PropTypes.number,
    };
    Tabs.defaultProps = {
        className: '',
        selectedTabIndex: 0,
    };
    return Tabs;
}(PureComponent));
export { Tabs };
export default Tabs;
//# sourceMappingURL=Tabs.js.map