var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { CaretDown, CaretUp } from '@procore/core-icons/dist';
import React from 'react';
import { useResize } from '../../effects/Resize';
import { mergeRefs } from '../../effects/mergeRefs';
import { useI18nContext } from '../../state/I18n';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { getBoundingRect } from '../../utils/dom';
import { MenuImperative } from '../MenuImperative';
import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger';
import { StyledDropdownTab, StyledLink, StyledOverlay, StyledTab, StyledTabList, StyledTabs, } from './Tabs.styles';
function noop() { }
export var Link = React.forwardRef(function Link(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledLink, __assign({ ref: ref }, props), children));
});
/**

 We use tabs to navigate between different, but related content.
 Tabs are commonly used on tool landing pages and on item detail pages.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/tabs-jss--demo)

 @see [Design Guidelines](https://design.procore.com/tabs)

 */
export var Tab = React.forwardRef(function Tab(_a, ref) {
    var _b = _a.active, active = _b === void 0 ? false : _b, children = _a.children, _c = _a.onMount, onMount = _c === void 0 ? noop : _c, _d = _a.onUnmount, onUnmount = _d === void 0 ? noop : _d, _e = _a.overflowing, overflowing = _e === void 0 ? false : _e, _f = _a.dropdown, dropdown = _f === void 0 ? false : _f, _g = _a.variant, variant = _g === void 0 ? '' : _g, props = __rest(_a, ["active", "children", "onMount", "onUnmount", "overflowing", "dropdown", "variant"]);
    var innerRef = React.useRef(null);
    React.useEffect(function () {
        onMount(innerRef.current);
        return onUnmount;
    }, []);
    return (React.createElement(StyledTab, __assign({}, props, { ref: mergeRefs(ref, innerRef), active: active || variant === 'active' }),
        React.createElement("div", { ref: ref }, children)));
});
export var MoreMenu = React.forwardRef(function MoreMenu(_a, ref) {
    var children = _a.children;
    var ctx = useOverlayTriggerContext();
    var menuRef = React.useRef(null);
    React.useEffect(function () {
        var _a, _b, _c, _d;
        (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.focus();
        (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.highlightFirst();
        (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.highlightSelected();
    }, []);
    function onSelect(selection) {
        ctx.hide(selection.event);
    }
    return (React.createElement(StyledOverlay, { ref: ref },
        React.createElement(MenuImperative, { ref: menuRef, onSelect: onSelect },
            React.createElement(MenuImperative.Options, null, React.Children.map(children, function (child, i) {
                if (React.isValidElement(child)) {
                    return (React.createElement(MenuImperative.Item, { item: null, key: i, selected: child.props.active }, React.cloneElement(child, { ref: null })));
                }
            })))));
});
var Tabs_ = React.forwardRef(function Tabs(_a, ref) {
    var children = _a.children, className = _a.className, _b = _a.dark, dark = _b === void 0 ? false : _b, qa = _a.qa, props = __rest(_a, ["children", "className", "dark", "qa"]);
    var i18n = useI18nContext();
    var _c = React.useState(false), moreMenuIsShown = _c[0], setMoreMenuIsShown = _c[1];
    var _d = React.useState([]), tabElements = _d[0], setTabElements = _d[1];
    var _e = React.useState(0), cutoffIndex = _e[0], setCutoffIndex = _e[1];
    var containerRef = React.useRef(null);
    var dropdownRef = React.useRef(null);
    function recalculate() {
        var container = getBoundingRect(containerRef.current);
        var dropdown = getBoundingRect(dropdownRef.current);
        var subtotals = tabElements.reduce(function (acc, el) {
            if (!el) {
                return acc;
            }
            var rect = getBoundingRect(el);
            return {
                subtotals: __spreadArray(__spreadArray([], acc.subtotals, true), [acc.total + rect.width], false),
                total: acc.total + rect.width,
            };
        }, { subtotals: new Array(), total: 0 }).subtotals;
        var index = subtotals.findIndex(function (val) { return val >= container.width - dropdown.width; });
        setCutoffIndex(index);
    }
    useResize({ onResize: recalculate });
    React.useEffect(recalculate);
    var filtered = React.Children.toArray(children).filter(function (child) { return child; });
    var overflowing = filtered.slice(cutoffIndex - 1);
    var isOverflowingActive = React.Children.toArray(overflowing).some(function (child) { return React.isValidElement(child) && child.props.active; });
    return (React.createElement(StyledTabs, __assign({ ref: ref, dark: dark, index: cutoffIndex }, props),
        React.createElement(StyledTabList, { ref: containerRef },
            filtered.map(function (child, i) {
                if (React.isValidElement(child))
                    return React.cloneElement(child, {
                        dark: dark,
                        onMount: function (el) {
                            setTabElements(function (elements) {
                                var oldElements = __spreadArray([], elements, true);
                                oldElements[i] = el;
                                return oldElements;
                            });
                        },
                        onUnmount: function () {
                            setTabElements(function (elements) {
                                var oldElements = __spreadArray([], elements, true);
                                oldElements[i] = null;
                                return oldElements;
                            });
                        },
                    });
            }),
            React.createElement(OverlayTrigger, { beforeShow: function () { return setMoreMenuIsShown(true); }, afterHide: function () { return setMoreMenuIsShown(false); }, trigger: "click", placement: "bottom-right", overlay: React.createElement(MoreMenu, null, overflowing), ref: ref },
                React.createElement(StyledDropdownTab, { ref: dropdownRef, active: isOverflowingActive, dark: dark },
                    React.createElement(StyledLink, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.more }, i18n.t('core.tabs.more')),
                    moreMenuIsShown ? (React.createElement(CaretUp, { size: "sm" })) : (React.createElement(CaretDown, { size: "sm" })))))));
});
Tabs_.displayName = 'Tabs';
Link.displayName = 'Tabs.Link';
Tab.displayName = 'Tabs.Tab';
export var Tabs = addSubcomponents({
    Link: Link,
    Tab: Tab,
}, Tabs_);
export default Tabs;
//# sourceMappingURL=Tabs.js.map