(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../Tab", "../TabContext", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var Tab_1 = (0, tslib_1.__importDefault)(require("../Tab"));
    var TabContext_1 = require("../TabContext");
    var styles_1 = require("./styles");
    var Tabs = (0, react_1.forwardRef)(function (_a, ref) {
        var items = _a.items, children = _a.children, className = _a.className, value = _a.value, size = _a.size, onChange = _a.onChange, props = (0, tslib_1.__rest)(_a, ["items", "children", "className", "value", "size", "onChange"]);
        var context = (0, TabContext_1.useTabContext)();
        var _b = (0, tslib_1.__read)((0, react_1.useState)(typeof value === "undefined" ? context === null || context === void 0 ? void 0 : context.value : value), 2), selected = _b[0], setSelected = _b[1];
        var handleChange = function (event, _value) {
            setSelected(_value);
            onChange === null || onChange === void 0 ? void 0 : onChange(event, _value);
            if (!value) {
                context === null || context === void 0 ? void 0 : context.onChange(_value);
            }
        };
        var getClassName = function (index, _value, _className) {
            return (_className || "") + " " + (_value === selected || (_value === undefined && index === selected)
                ? "tab_selected"
                : "");
        };
        (0, react_1.useEffect)(function () {
            setSelected(value);
        }, [value]);
        (0, react_1.useEffect)(function () {
            if (!value) {
                setSelected((context === null || context === void 0 ? void 0 : context.value) || selected);
            }
        }, [context === null || context === void 0 ? void 0 : context.value]);
        return (react_1.default.createElement(styles_1.TabsStyled, (0, tslib_1.__assign)({ className: className, role: "tablist", ref: ref }, props), children
            ? react_1.default.Children.map(children, function (child, index) {
                return react_1.default.cloneElement(child, {
                    size: size,
                    className: getClassName(index, child.props.value, child.props.className),
                    onClick: function (e) {
                        var _a, _b;
                        handleChange(e, child.props.value || index);
                        (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                    }
                });
            })
            : items === null || items === void 0 ? void 0 : items.map(function (item, index) {
                if (typeof item === "string") {
                    return (react_1.default.createElement(Tab_1.default, { size: size, key: item, label: item, className: index === selected ? "tab_selected" : "", onClick: function (event) { return handleChange(event, index); } }));
                }
                return (react_1.default.createElement(Tab_1.default, { size: size, key: item.label, label: item.label, className: getClassName(index, item.value), icon: item.icon, onClick: function (event) {
                        return handleChange(event, item.value || index);
                    } }));
            })));
    });
    Tabs.displayName = "Tabs";
    exports.default = Tabs;
});
