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 { Clear } from '@procore/core-icons/dist';
import React from 'react';
import { withDeprecation } from '../../effects/Deprecation';
import { mergeRefs } from '../../effects/mergeRefs';
import { useOverflowObserver } from '../../effects/OverflowObserver';
import { useScrollLock } from '../../effects/ScrollLock';
import { Visibility } from '../../state/Visibility';
import { useLayoutEventListener } from '../../effects/EventListener';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { Button } from '../Button';
import { Portal } from '../Portal';
import { StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon, fadeInClassName, fadeOutClassName, StyledModalFooterSummary, } from './Modal.styles';
import { Section, SectionProvider, LevelContext } from '../../layouts/Section';
function noop() { }
var ModalContext = React.createContext({
    isBodyScrolled: false,
    setIsBodyScrolled: noop,
});
var ModalClosableHeader = React.forwardRef(function (_a, ref) {
    var children = _a.children, onClose = _a.onClose, qa = _a.qa, props = __rest(_a, ["children", "onClose", "qa"]);
    var isBodyScrolled = React.useContext(ModalContext).isBodyScrolled;
    return (React.createElement(StyledModalHeader, __assign({ "$isBodyScrolled": isBodyScrolled }, props, { ref: ref }),
        React.createElement(StyledModalHeading, null, children),
        onClose && (React.createElement(StyledModalCancel, null,
            React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton, onClick: onClose, icon: React.createElement(Clear, null), variant: "tertiary", tabIndex: -1 })))));
});
var ModalContainer = React.forwardRef(function (_a, ref) {
    var placement = _a.placement, width = _a.width, props = __rest(_a, ["placement", "width"]);
    return (React.createElement(StyledModalContainer, __assign({}, props, { shadowStrength: 4, "$placement": placement, "$width": width, ref: ref })));
});
var ModalBody = React.forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.noSideSpacing, noSideSpacing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "noSideSpacing"]);
    var _c = useOverflowObserver(), isOverflowingY = _c.isOverflowingY, overflowRef = _c.ref;
    var scrollRef = React.useRef(null);
    var setIsBodyScrolled = React.useContext(ModalContext).setIsBodyScrolled;
    useLayoutEventListener({
        event: 'scroll',
        handler: function (e) {
            setIsBodyScrolled(e.currentTarget.scrollTop > 0);
        },
        scope: scrollRef,
    });
    return (React.createElement(SectionProvider, null,
        React.createElement(LevelContext.Provider, { value: 3 },
            React.createElement(StyledModalBody, __assign({}, props, { isOverflowingY: isOverflowingY, noSideSpacing: noSideSpacing, ref: mergeRefs(overflowRef, scrollRef, ref) }), children))));
});
var ModalFooterSummary = React.forwardRef(function (_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledModalFooterSummary, __assign({}, props, { ref: ref }), children));
});
var ModalFooterNotation = React.forwardRef(function (_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledModalFooterNotation, __assign({ intent: "small", color: "gray45", italic: true }, props, { ref: ref }), children));
});
/**

 We use modals to present additional actions, information, or forms on pages
 where a user’s experience would benefit from remaining on the same page.
 They can include graphics, inputs, buttons, and other elements as needed to
 produce the workflow or action needed.

 Do not include modals on pages with complicated UI layouts.

 @since 10.19.0

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

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

 */
var Modal_ = React.forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.onClickOverlay, onClickOverlay = _b === void 0 ? noop : _b, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'center' : _d, props = __rest(_a, ["children", "onClickOverlay", "open", "placement"]);
    useScrollLock(open);
    var _e = React.useState(open), visible = _e[0], setVisible = _e[1];
    var _f = React.useState(''), fadeType = _f[0], setFadeType = _f[1];
    var _g = React.useState(false), isBodyScrolled = _g[0], setIsBodyScrolled = _g[1];
    React.useEffect(function () {
        if (open) {
            setVisible(true);
            setTimeout(function () {
                setFadeType(fadeInClassName);
            }, 0);
        }
        else {
            setFadeType(fadeOutClassName);
        }
    }, [open]);
    var onTransitionEnd = function () {
        if (fadeType === fadeOutClassName) {
            setVisible(false);
        }
    };
    return visible ? (React.createElement(Portal, null,
        React.createElement(StyledModal, { className: fadeType, ref: ref, onTransitionEnd: onTransitionEnd },
            React.createElement(StyledModalScrim, { onClick: onClickOverlay }),
            React.createElement(ModalContainer, __assign({}, props, { placement: placement }),
                React.createElement(StyledModalContent, null,
                    React.createElement(ModalContext.Provider, { value: { isBodyScrolled: isBodyScrolled, setIsBodyScrolled: setIsBodyScrolled } }, children)))))) : null;
});
export var ConfirmModal = React.forwardRef(function (_a, ref) {
    var children = _a.children, headline = _a.headline, onClose = _a.onClose, props = __rest(_a, ["children", "headline", "onClose"]);
    return (React.createElement(Modal, __assign({}, props, { ref: ref }),
        React.createElement(ModalClosableHeader, { onClose: onClose },
            React.createElement(StyledModalWarningIcon, { size: "lg" }),
            headline),
        children));
});
Modal_.displayName = 'Modal';
ConfirmModal.displayName = 'ConfirmModal';
ModalBody.displayName = 'Modal.Body';
ModalFooterNotation.displayName = 'Modal.FooterNotation';
ModalFooterSummary.displayName = 'Modal.FooterSummary';
var Body = ModalBody;
var Container = ModalContainer;
var Content = StyledModalContent;
var FooterSummary = ModalFooterSummary;
var Footer = StyledModalFooter;
var FooterButtons = StyledModalButtons;
var FooterNotation = ModalFooterNotation;
var Header = ModalClosableHeader;
var Overlay = StyledModal;
var Scrim = StyledModalScrim;
var State = withDeprecation({ oldThing: 'Modal.State' })(Visibility);
export var Modal = addSubcomponents({
    Body: Body,
    Container: Container,
    Content: Content,
    Footer: Footer,
    FooterButtons: FooterButtons,
    FooterNotation: FooterNotation,
    FooterSummary: FooterSummary,
    Header: Header,
    Overlay: Overlay,
    Scrim: Scrim,
    State: State,
    Section: Section,
}, Modal_);
//# sourceMappingURL=Modal.js.map