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 styles from '@procore/core-css/src/layouts/_detail_page.scss';
import React from 'react';
import { ulid } from 'ulid';
import { H1, H2, H3 } from '../../components/Semantic';
import { Box, Button, Card as CardBase } from '../../index';
import { addSubcomponents } from '../../utils/addSubcomponents';
var classnames = require('classnames/bind');
var cx = classnames.bind(styles);
export var ViewContext = React.createContext({ width: 'md' });
var isFunction = function (obj) { return typeof obj === 'function'; };
var DetailPage_ = React.forwardRef(function DetailPage(_a, ref) {
    var children = _a.children, className = _a.className, _b = _a.width, width = _b === void 0 ? 'md' : _b, props = __rest(_a, ["children", "className", "width"]);
    return (React.createElement(ViewContext.Provider, { value: { width: width } },
        React.createElement("div", __assign({ className: cx('detail-page', className), ref: ref }, props), children)));
});
export var Actions = React.forwardRef(function Actions(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__actions', className), ref: ref }, props), children));
});
export var Banner = React.forwardRef(function Banner(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__banner'), ref: ref }, props), children));
});
export var Body = React.forwardRef(function Body(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    var width = React.useContext(ViewContext).width;
    return (React.createElement("div", __assign({ className: cx("detail-page__body", "detail-page__body--width-".concat(width), className), ref: ref }, props), children));
});
export var Breadcrumbs = React.forwardRef(function Breadcrumbs(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__breadcrumbs', className), ref: ref }, props), children));
});
export var Card = React.forwardRef(function Card(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement(SectionProvider, null,
        React.createElement(CardBase, __assign({ className: cx('detail-page__card', className), ref: ref }, props), children)));
});
export var DetailTabs = React.forwardRef(function DetailTabs(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__tabs', className), ref: ref }, props), children));
});
export var Header = React.forwardRef(function Header(_a, ref) {
    var children = _a.children, className = _a.className, transparent = _a.transparent, props = __rest(_a, ["children", "className", "transparent"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__header', className, {
            'detail-page__header--drop-shadow': !transparent,
        }), ref: ref }, props), children));
});
export var Heading = React.forwardRef(function Heading(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement(H1, __assign({ className: className, ref: ref }, props), children));
});
export var Footer = React.forwardRef(function Footer(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    var width = React.useContext(ViewContext).width;
    var _b = React.useState(false), atBottom = _b[0], setAtBottom = _b[1];
    var observer = React.useRef(new IntersectionObserver(function (entries) {
        entries[0].isIntersecting ? setAtBottom(true) : setAtBottom(false);
    }));
    return (React.createElement(React.Fragment, null,
        React.createElement("div", __assign({ className: cx('detail-page__footer', { 'detail-page__footer--at-bottom': atBottom }, className), ref: ref }, props),
            React.createElement("div", { className: cx('detail-page__footer__content', "detail-page__footer__content--width-".concat(width)) }, children)),
        React.createElement("div", { className: cx('detail-page__footer-spacer') }),
        React.createElement("div", { ref: function (el) {
                if (el)
                    observer.current.observe(el);
            } })));
});
export var FooterNotation = React.forwardRef(function FooterNotation(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__footer__notation', className), ref: ref }, props), children));
});
export var Title = React.forwardRef(function Title(_a, ref) {
    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
    return (React.createElement("div", __assign({ className: cx('detail-page__title', className), ref: ref }, props), children));
});
// Header levels start at level 2
var LevelContext = React.createContext(2);
var SectionContext = React.createContext({
    open: {},
    setSection: function () { },
    toggleSection: function () { },
});
var SectionProvider = function (_a) {
    var children = _a.children;
    var _b = React.useState({}), open = _b[0], setSectionsOpen = _b[1];
    var toggleSection = function (id) {
        return setSectionsOpen(function (prev) {
            var _a;
            return (__assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a)));
        });
    };
    var setSection = function (id, open) {
        return setSectionsOpen(function (prev) {
            var _a;
            return (__assign(__assign({}, prev), (_a = {}, _a[id] = open, _a)));
        });
    };
    return (React.createElement(SectionContext.Provider, { value: {
            open: open,
            toggleSection: toggleSection,
            setSection: setSection,
        } }, children));
};
export var Section = React.forwardRef(function Section(_a, ref) {
    var _b;
    var actions = _a.actions, children = _a.children, className = _a.className, expandId = _a.expandId, heading = _a.heading, _c = _a.initialIsOpen, initialIsOpen = _c === void 0 ? true : _c, props = __rest(_a, ["actions", "children", "className", "expandId", "heading", "initialIsOpen"]);
    var level = React.useContext(LevelContext);
    var sections = React.useContext(SectionContext);
    var toggleOpen = React.useCallback(function () {
        if (expandId) {
            sections.toggleSection(expandId);
        }
    }, [expandId]);
    var open = expandId ? sections.open[expandId] : true;
    React.useEffect(function () {
        if (expandId && open === undefined) {
            sections.setSection(expandId, initialIsOpen);
        }
    }, []);
    var _d = React.useMemo(function () {
        return {
            contentRegionId: "content-".concat(ulid()),
            headingTextId: "heading-".concat(ulid()),
        };
    }, []), contentRegionId = _d.contentRegionId, headingTextId = _d.headingTextId;
    var Heading = level === 2 ? H2 : H3;
    return (React.createElement(LevelContext.Provider, { value: level + 1 },
        React.createElement("div", __assign({ ref: ref, className: cx('detail-page__section', (_b = {
                    'detail-page__section--divide': level >= 3 || !heading,
                    'detail-page__section--expand-closed': !open || !children,
                    'detail-page__section--level-anonymous': !heading
                },
                _b["detail-page__section--level-".concat(level)] = heading && level,
                _b), className) }, props),
            React.createElement("div", { className: cx('detail-page__section__inner') },
                heading || actions ? (React.createElement("div", { className: cx('detail-page__section__header') },
                    expandId ? (React.createElement("div", { "aria-labelledby": headingTextId, "aria-level": level, className: cx('detail-page__section__collapse-heading'), role: "heading" },
                        React.createElement(Button, { "aria-controls": contentRegionId, "aria-expanded": open, "aria-labelledby": headingTextId, className: cx('detail-page__section__collapse-heading-button'), icon: open ? 'chevron-down' : 'chevron-right', onClick: toggleOpen, variant: "tertiary" }))) : null,
                    React.createElement(Heading, { "aria-hidden": expandId ? true : false, id: headingTextId }, heading),
                    actions ? (React.createElement(Box, { alignSelf: "flex-start", className: cx('detail-page__actions'), flexShrink: 0, marginLeft: "auto" }, isFunction(actions)
                        ? actions({ open: open })
                        : actions)) : null)) : null,
                React.createElement("div", { "aria-hidden": !open, className: cx('detail-page__section__content-region'), id: contentRegionId, role: "region" }, open ? children : null)))));
});
DetailPage_.displayName = 'DetailPage';
Actions.displayName = 'DetailPage.Actions';
Banner.displayName = 'DetailPage.Banner';
Body.displayName = 'DetailPage.Body';
Card.displayName = 'DetailPage.Card';
Breadcrumbs.displayName = 'DetailPage.Breadcrumbs';
DetailTabs.displayName = 'DetailPage.DetailTabs';
Header.displayName = 'DetailPage.Header';
Heading.displayName = 'DetailPage.Heading';
Footer.displayName = 'DetailPage.Footer';
FooterNotation.displayName = 'DetailPage.FooterNotation';
Title.displayName = 'DetailPage.Title';
Section.displayName = 'DetailPage.Section';
/**
 * @deprecated
 *
 * The `DetailPage` component has been deprecated and will be removed removed
 * in a future version. Please use `NextDetailPage` instead.
 *
 * @deprecatedSince 10.20.0
 *
 * @see https://core.procore.com/latest/web/layout/next-detail-page/react/
 * @since 10.19.0
 */
export var DetailPage = addSubcomponents({
    Actions: Actions,
    Banner: Banner,
    Body: Body,
    Breadcrumbs: Breadcrumbs,
    Card: Card,
    DetailTabs: DetailTabs,
    Header: Header,
    Heading: Heading,
    Footer: Footer,
    FooterNotation: FooterNotation,
    Section: Section,
    Title: Title,
}, DetailPage_);
export default DetailPage;
//# sourceMappingURL=DetailPage.js.map