import { __assign, __rest } from "tslib";
import React, { useContext, useRef, useState } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { ArrowDown } from '../_utils/components';
var Tabs = React.forwardRef(function (props, ref) {
    var _a, _b, _c, _d, _e;
    var _f = props.type, type = _f === void 0 ? 'line' : _f, _g = props.direction, direction = _g === void 0 ? 'horizontal' : _g, _h = props.size, size = _h === void 0 ? 'md' : _h, _j = props.animated, animated = _j === void 0 ? true : _j, activeKey = props.activeKey, defaultActiveKey = props.defaultActiveKey, onChange = props.onChange, className = props.className, children = props.children, customisedCls = props.prefixCls, otherProps = __rest(props, ["type", "direction", "size", "animated", "activeKey", "defaultActiveKey", "onChange", "className", "children", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('tabs', configContext.prefixCls, customisedCls);
    var lineWidth = useState(0)[0];
    var lineHeight = useState(0)[0];
    var scrollOffset = useState(0)[0];
    var headerWidth = useState(0)[0];
    var headerHeight = useState(0)[0];
    var scrollWidth = useState(0)[0];
    var scrollHeight = useState(0)[0];
    var isArrowShown = useState(false)[0];
    var tabHeaderWrapRef = useRef(null);
    var tabHeaderNavRef = useRef(null);
    var activeTab = useRef(null);
    var headerDimension = direction === 'horizontal' ? headerWidth : headerHeight;
    var scrollDimension = direction === 'horizontal' ? scrollWidth : scrollHeight;
    var arrowL = direction === 'horizontal' ? 'left' : 'top';
    var arrowR = direction === 'horizontal' ? 'right' : 'bottom';
    var isArrowLDisabled = scrollOffset === 0;
    var isArrowRDisabled = Math.floor(Math.abs(scrollOffset + headerDimension - scrollDimension)) === 0;
    var cls = classNames(prefixCls, className, prefixCls + "_" + size, prefixCls + "_" + direction, (_a = {}, _a[prefixCls + "_" + type] = direction === 'horizontal' && type, _a));
    var headerNavStyle = direction === 'horizontal'
        ? { transform: "translate3d(" + -scrollOffset + "px, 0, 0)" }
        : { transform: "translate3d(0, " + -scrollOffset + "px, 0)" };
    var headerCls = classNames(prefixCls + "__header", (_b = {},
        _b[prefixCls + "__header_arrow-mode"] = isArrowShown,
        _b));
    var bodyCls = classNames(prefixCls + "__body", (_c = {},
        _c[prefixCls + "__body_animated"] = animated,
        _c));
    var arrowLCls = classNames(prefixCls + "__header__arrow", (_d = {},
        _d[prefixCls + "__header__arrow--" + arrowL] = arrowL,
        _d[prefixCls + "__header__arrow--disabled"] = isArrowLDisabled,
        _d));
    var arrowRCls = classNames(prefixCls + "__header__arrow", (_e = {},
        _e[prefixCls + "__header__arrow--" + arrowR] = arrowR,
        _e[prefixCls + "__header__arrow--disabled"] = isArrowRDisabled,
        _e));
    var getSelectIndex = function () {
        var selectIndex = 0;
        React.Children.forEach(children, function (child, idx) {
            var element = child;
            if (element.props && element.props.selected) {
                selectIndex = idx;
            }
        });
        return selectIndex;
    };
    var value = useState(activeKey || defaultActiveKey || getSelectIndex())[0];
    var animateStyle = direction === 'horizontal' ? { marginLeft: "-" + value * 100 + "%" } : {};
    var scrollLeftOrTop = function (e) { };
    var scrollRightOrBottom = function (e) { };
    var renderHeaderLine = function () {
        var _a = activeTab.current || {}, _b = _a.offsetLeft, offsetLeft = _b === void 0 ? 0 : _b, _c = _a.offsetTop, offsetTop = _c === void 0 ? 0 : _c;
        var headerLineStyle = direction === 'horizontal'
            ? { width: lineWidth, height: 0, transform: "translate3d(" + offsetLeft + "px,0,0)" }
            : { width: 0, height: lineHeight, transform: "translate3d(0," + offsetTop + "px,0)" };
        return React.createElement("div", { className: prefixCls + "__header-line", style: headerLineStyle });
    };
    var renderHeaderItem = function () {
        return React.Children.map(children, function (child) {
            var childElement = child;
            if (childElement.type.displayName === 'TabPanel') {
                return React.createElement("div", { className: prefixCls + "__header-nav-item" }, childElement.props.tab);
            }
            else {
                return null;
            }
        });
    };
    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cls }),
        React.createElement("div", { className: headerCls },
            React.createElement("div", { className: prefixCls + "__header-scroll", ref: tabHeaderWrapRef },
                React.createElement("div", { className: prefixCls + "__header-nav", ref: tabHeaderNavRef, style: isArrowShown ? headerNavStyle : {} },
                    renderHeaderItem(),
                    type === 'line' && renderHeaderLine())),
            isArrowShown && (React.createElement(React.Fragment, null,
                React.createElement("span", { className: arrowLCls, onClick: function (e) { return !isArrowLDisabled && scrollLeftOrTop(e); } },
                    React.createElement(ArrowDown, null)),
                React.createElement("span", { className: arrowRCls, onClick: function (e) { return !isArrowRDisabled && scrollRightOrBottom(e); } },
                    React.createElement(ArrowDown, null))))),
        React.createElement("div", { className: bodyCls, style: animateStyle }, React.Children.map(children, function (child, idx) {
            var childElement = child;
            if (childElement.type.displayName === 'TabPanel') {
                var childProps = __assign(__assign({}, childElement.props), { selected: value === idx });
                return React.cloneElement(childElement, childProps);
            }
            else {
                console.warn('Tabs has a child that is not a TabPanel component.');
                return null;
            }
        }))));
});
Tabs.displayName = 'Tabs';
export default Tabs;
//# sourceMappingURL=tabs.js.map