/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module WidgetContentLayout
 */
import "./WidgetContentLayout.scss";
import classNames from "classnames";
import * as React from "react";
import { Divider, ProgressLinear, ProgressRadial } from "@itwin/itwinui-react";
import { HeaderLayout } from "./header/HeaderLayout.js";
const Header = React.forwardRef(function Header(props, ref) {
    const { className, children, toggle, buttons, menu, title, onSearch, icons, iconSize, ...rest } = props;
    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-header", className), ...rest, ref: ref },
        React.createElement(HeaderLayout, { toggle: toggle, buttons: buttons, menu: menu, title: title, onSearch: onSearch, icons: icons, iconSize: iconSize }),
        children));
});
Header.displayName = "appui:WidgetContentLayout.Header";
const Body = React.forwardRef(function Body(props, ref) {
    const { isNonBlockingLoading, isLoading, className, children, ...rest } = props;
    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-body_wrapper" },
        isLoading ? (React.createElement(LoadingOverlay, null)) : (isNonBlockingLoading && (React.createElement(ProgressLinear, { className: "nz-widget-widgetContentLayout-progress" }))),
        React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-body", className), ...rest, ref: ref }, children)));
});
Body.displayName = "appui:WidgetContentLayout.Body";
const Footer = React.forwardRef(function Footer(props, ref) {
    const { className, children, ...rest } = props;
    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout-footer", className), ...rest, ref: ref }, children));
});
Footer.displayName = "appui:WidgetContentLayout.Footer";
function LoadingOverlay() {
    return (React.createElement("div", { className: "nz-widget-widgetContentLayout-loadingOverlay" },
        React.createElement(ProgressRadial, null)));
}
const WidgetContentLayoutInner = React.forwardRef(function WidgetContentLayoutInner(props, ref) {
    const { isLoading, hideDividers, children, className, ...divProps } = props;
    const [headerElement, setHeaderElement] = React.useState();
    const [bodyElement, setBodyElement] = React.useState();
    const [footerElement, setFooterElement] = React.useState();
    React.useEffect(() => {
        React.Children.forEach(children, (child) => {
            if (!React.isValidElement(child))
                return;
            if (child.type === Header)
                setHeaderElement(child);
            else if (child.type === Body)
                setBodyElement(child);
            else if (child.type === Footer)
                setFooterElement(child);
        });
    }, [children]);
    const widgetComponents = [headerElement, bodyElement, footerElement].filter(Boolean);
    return (React.createElement("div", { className: classNames("nz-widget-widgetContentLayout", className), ...divProps, ref: ref },
        isLoading && React.createElement(LoadingOverlay, null),
        widgetComponents.map((component, index) => (React.createElement(React.Fragment, { key: index },
            component,
            index < widgetComponents.length - 1 && !hideDividers && (React.createElement(Divider, { className: "nz-widget-widgetContentLayout-divider" })))))));
});
/**
 * A layout component for widgets that provides a top section for buttons, a body section and a footer section.
 * @example
 * <WidgetContentLayout>
 *  <WidgetContentLayout.Header />
 *  <WidgetContentLayout.Body>
 *   <ContentComponent />
 *  </WidgetContentLayout.Body>
 *  <WidgetContentLayout.Footer>
 *   <FooterComponent />
 *  </WidgetContentLayout.Footer>
 * </WidgetContentLayout>
 *  @public
 */
export const WidgetContentLayout = Object.assign(WidgetContentLayoutInner, {
    Header,
    Body,
    Footer,
});
WidgetContentLayout.Header = Header;
WidgetContentLayout.Body = Body;
WidgetContentLayout.Footer = Footer;
//# sourceMappingURL=WidgetContentLayout.js.map