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;
};
import React from 'react';
import { ChevronLeft, Clear, EllipsisVertical } from '@procore/core-icons/dist';
import { mergeRefs } from '../../effects/mergeRefs';
import { useOverflowObserver } from '../../effects/OverflowObserver';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { isReactElement } from '../../utils/isReactElement';
import { partition } from '../../utils/partition';
import { Button } from '../Button';
import { Menu } from '../Menu';
import { OverlayTrigger } from '../OverlayTrigger';
import { Tooltip } from '../Tooltip';
import { StyledBody, StyledFooter, StyledFooterActions, StyledFooterNotation, StyledHeader, StyledHeaderActions, StyledHeaderBackAction, StyledMoreMenu, StyledPanel, StyledTitle, StyledCloseButton, } from './Panel.styles';
import { Section, SectionProvider, LevelContext } from '../../layouts/Section';
import { useScroll } from '../../effects/Scroll';
import { useResize } from '../../effects/Resize';
import { useI18nContext } from '../../state/I18n';
var PanelContext = React.createContext({
    isFooterSticky: false,
    setIsFooterSticky: function () { },
});
var maxVisibleIcons = 3;
var HeaderAction = React.forwardRef(function HeaderAction(_a, ref) {
    var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
    return (React.createElement(Tooltip, { overlay: title, ref: ref },
        React.createElement(Button, __assign({}, props, { variant: "tertiary" }), children)));
});
var MoreMenu = React.forwardRef(function MoreMenu(_a, ref) {
    var children = _a.children;
    return (React.createElement(StyledMoreMenu, { ref: ref },
        React.createElement(Menu, { ref: function (node) { return node === null || node === void 0 ? void 0 : node.focus(); } },
            React.createElement(Menu.Options, null, React.Children.map(children, function (child) {
                if (isReactElement(child)) {
                    return (React.createElement(Menu.Item, { item: null, key: child.props.title, onClick: child.props.onClick }, child.props.title));
                }
            })))));
});
export var MoreIcon = function (_a) {
    var children = _a.children, qa = _a.qa;
    return (React.createElement(OverlayTrigger, { trigger: "click", placement: "bottom-right", overlay: React.createElement(MoreMenu, null, children) },
        React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.moreIcon, variant: "tertiary", icon: React.createElement(EllipsisVertical, null) })));
};
var HeaderActions = React.forwardRef(function HeaderActions(_a, ref) {
    var children = _a.children, qa = _a.qa, props = __rest(_a, ["children", "qa"]);
    var iconsAmount = React.Children.count(children);
    var _b = iconsAmount > maxVisibleIcons
        ? partition(function (_, index) { return index > iconsAmount - maxVisibleIcons; }, React.Children.toArray(children))
        : [children, []], visibleIcons = _b[0], hiddenIcons = _b[1];
    return (React.createElement(StyledHeaderActions, __assign({}, props, { ref: ref }),
        visibleIcons,
        hiddenIcons.length > 0 && React.createElement(MoreIcon, { qa: qa }, hiddenIcons)));
});
export var TitleTooltip = function (_a) {
    var children = _a.children, overlay = _a.overlay, isVisible = _a.isVisible;
    if (!isVisible) {
        return children;
    }
    return (React.createElement(Tooltip, { trigger: "hover", overlay: React.createElement(Tooltip.Content, null, overlay), placement: "bottom" }, children));
};
var Title = React.forwardRef(function Title(_a, ref) {
    var children = _a.children, qa = _a.qa, props = __rest(_a, ["children", "qa"]);
    var _b = useOverflowObserver(), isOverflowingX = _b.isOverflowingX, overflowRef = _b.ref;
    return (React.createElement(TitleTooltip, { isVisible: isOverflowingX, overlay: children },
        React.createElement(StyledTitle, __assign({}, props, { ref: mergeRefs(overflowRef, ref), intent: "h2", "data-qa": qa === null || qa === void 0 ? void 0 : qa.title }), children)));
});
var Header = React.forwardRef(function Header(_a, ref) {
    var children = _a.children, onClickBack = _a.onClickBack, onClose = _a.onClose, props = __rest(_a, ["children", "onClickBack", "onClose"]);
    var I18n = useI18nContext();
    return (React.createElement(StyledHeader, __assign({}, props, { ref: ref }),
        React.createElement(StyledHeaderBackAction, { active: onClickBack !== undefined },
            React.createElement(Button, { variant: "tertiary", onClick: onClickBack, icon: React.createElement(ChevronLeft, null) })),
        children,
        typeof onClose === 'function' && (React.createElement(StyledCloseButton, null,
            React.createElement(HeaderAction, { title: I18n.t('core.panel.close'), icon: React.createElement(Clear, null), onClick: onClose })))));
});
var Body = React.forwardRef(function Body(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var bodyRef = React.useRef(null);
    var setIsFooterSticky = React.useContext(PanelContext).setIsFooterSticky;
    function calculateBodyScroll() {
        if (!bodyRef.current) {
            return;
        }
        var isScrollable = bodyRef.current.scrollHeight > bodyRef.current.clientHeight;
        if (isScrollable) {
            var isNotScrolledToBottom = bodyRef.current.scrollTop + bodyRef.current.clientHeight <
                bodyRef.current.scrollHeight;
            setIsFooterSticky(isNotScrolledToBottom);
        }
        else {
            setIsFooterSticky(false);
        }
    }
    React.useEffect(calculateBodyScroll, []);
    useScroll({ onScroll: calculateBodyScroll, scope: bodyRef });
    useResize({ onResize: calculateBodyScroll });
    return (React.createElement(SectionProvider, null,
        React.createElement(LevelContext.Provider, { value: 3 },
            React.createElement(StyledBody, __assign({}, props, { ref: mergeRefs(ref, bodyRef, calculateBodyScroll) }), children))));
});
var FooterNotation = React.forwardRef(function FooterNotation(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledFooterNotation, __assign({}, props, { ref: ref }), children));
});
var FooterActions = React.forwardRef(function FooterActions(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledFooterActions, __assign({}, props, { ref: ref }), children));
});
var Footer = React.forwardRef(function Footer(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var isFooterSticky = React.useContext(PanelContext).isFooterSticky;
    return (React.createElement(StyledFooter, __assign({}, props, { ref: ref, "$hasShadow": isFooterSticky }), children));
});
/**

 Panels help users complete tasks or view additional information alongside the
 main content of a page.

 Panels are often initiated by clicking on an item somewhere on the main page,
 and they often contain additional information or options specific to that item.

 @since 10.19.0

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

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

 */
var Panel_ = React.forwardRef(function Panel(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var _b = React.useState(false), isFooterSticky = _b[0], setIsFooterSticky = _b[1];
    return (React.createElement(PanelContext.Provider, { value: {
            setIsFooterSticky: setIsFooterSticky,
            isFooterSticky: isFooterSticky,
        } },
        React.createElement(StyledPanel, __assign({}, props, { ref: ref }), children)));
});
Panel_.displayName = 'Panel';
Body.displayName = 'Panel.Body';
Footer.displayName = 'Panel.Footer';
FooterActions.displayName = 'Panel.FooterActions';
FooterNotation.displayName = 'Panel.FooterNotation';
Header.displayName = 'Panel.Header';
HeaderAction.displayName = 'Panel.HeaderAction';
HeaderActions.displayName = 'Panel.HeaderActions';
Title.displayName = 'Panel.Title';
export var Panel = addSubcomponents({
    Body: Body,
    Footer: Footer,
    FooterActions: FooterActions,
    FooterNotation: FooterNotation,
    Header: Header,
    HeaderAction: HeaderAction,
    HeaderActions: HeaderActions,
    Section: Section,
    Title: Title,
}, Panel_);
//# sourceMappingURL=Panel.js.map