"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var PropTypes = (0, tslib_1.__importStar)(require("prop-types"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
require("./index.css");
var classnames_2 = (0, tslib_1.__importDefault)(require("../../utils/classnames"));
function TabsH5(_a) {
    var _b;
    var tabs = _a.tabs, events = _a.events, className = _a.className, panel1 = _a.panel1, panel2 = _a.panel2, panel3 = _a.panel3, panel4 = _a.panel4, panel5 = _a.panel5, panel6 = _a.panel6, panel7 = _a.panel7, panel8 = _a.panel8, panel9 = _a.panel9, panel10 = _a.panel10, panel11 = _a.panel11, panel12 = _a.panel12, panel13 = _a.panel13, panel14 = _a.panel14, panel15 = _a.panel15, panel16 = _a.panel16, panel17 = _a.panel17, panel18 = _a.panel18, panel19 = _a.panel19, panel20 = _a.panel20, style = _a.style;
    var cachePanel = {
        panel1: panel1,
        panel2: panel2,
        panel3: panel3,
        panel4: panel4,
        panel5: panel5,
        panel6: panel6,
        panel7: panel7,
        panel8: panel8,
        panel9: panel9,
        panel10: panel10,
        panel11: panel11,
        panel12: panel12,
        panel13: panel13,
        panel14: panel14,
        panel15: panel15,
        panel16: panel16,
        panel17: panel17,
        panel18: panel18,
        panel19: panel19,
        panel20: panel20
    };
    var _c = (0, tslib_1.__read)((0, react_1.useState)(0), 2), currentIndex = _c[0], setCurrentIndex = _c[1];
    var stickyStyle = (0, react_1.useMemo)(function () {
        var length = tabs.length;
        return {
            width: 1 / length * 100 + "%",
            transform: "translate3d( " + currentIndex * 100 + "%, 0, 0)"
        };
    }, [tabs, currentIndex]);
    return (react_1.default.createElement("div", { className: (0, classnames_2.default)("weda-tabs weda-ui", (_b = {},
            _b[className] = className,
            _b)), style: style },
        react_1.default.createElement("div", { className: "weda-tabs__nav" }, tabs === null || tabs === void 0 ? void 0 :
            tabs.map(function (_a, index) {
                var name = _a.name, title = _a.title;
                return (react_1.default.createElement("div", { className: (0, classnames_1.default)('weda-tabs__nav-cell', currentIndex === index && 'active', currentIndex > 5 && 'scroll'), key: name || index, onClick: function (event) {
                        setCurrentIndex(index);
                        events && events.change(tabs[index], { event: event });
                    } }, title));
            }),
            react_1.default.createElement("div", { className: "weda-tabs__nav-sticky", style: stickyStyle })),
        react_1.default.createElement("div", { className: (0, classnames_2.default)({
                'weda-tabs__panel': true,
            }) }, cachePanel["panel" + (currentIndex + 1)])));
}
exports.default = TabsH5;
TabsH5.propTypes = {
    tabs: PropTypes.array,
    className: PropTypes.string,
    style: PropTypes.object,
    events: PropTypes.objectOf(PropTypes.func),
    panel1: PropTypes.node,
    panel2: PropTypes.node,
    panel3: PropTypes.node,
    panel4: PropTypes.node,
    panel5: PropTypes.node,
    panel6: PropTypes.node,
    panel7: PropTypes.node,
    panel8: PropTypes.node,
    panel9: PropTypes.node,
    panel10: PropTypes.node,
    panel11: PropTypes.node,
    panel12: PropTypes.node,
    panel13: PropTypes.node,
    panel14: PropTypes.node,
    panel15: PropTypes.node,
    panel16: PropTypes.node,
    panel17: PropTypes.node,
    panel18: PropTypes.node,
    panel19: PropTypes.node,
    panel20: PropTypes.node,
};
//# sourceMappingURL=tabsH5.js.map