import React, { useEffect } from 'react';
import classNames from 'classnames';
import { NO_OVERFLOW_CLASS } from "../../constants";
import { Modal } from '@pulse/ui/components/Modal';
import { ReactComponent as CloseSvg } from './icon/close.svg';
import ModalBarBlock from './ModalBarBlock';
import ModalButtonBlock from './ModalButtonBlock';
import ModalBreadcrumbs from './ModalBreadcrumbs';
import { ModalPageWrapperHeader, ModalWrapperActionBarDiv } from './styles';
export const ModalPageWrapper = React.forwardRef(({ actionBar, onClose, children, windowLevel = 1, size = 'm', breadcrumbs = [] }, ref) => {
    useEffect(() => {
        const body = document.body;
        if (body && windowLevel === 1) {
            body.classList.add(NO_OVERFLOW_CLASS);
        }
        return () => {
            if (body && windowLevel === 1) {
                body.classList.remove(NO_OVERFLOW_CLASS);
            }
        };
    }, [windowLevel]);
    const _actionBar = actionBar ? (React.createElement(ModalBarBlock, { className: "assessment-modal-page-action" },
        React.createElement(ModalWrapperActionBarDiv, null, actionBar))) : null;
    const _header = (React.createElement(ModalPageWrapperHeader, null,
        breadcrumbs && React.createElement(ModalBreadcrumbs, { breadcrumbs: breadcrumbs }),
        React.createElement(ModalButtonBlock, { "$containsOnlyIcon": true, onClick: () => onClose() },
            React.createElement(CloseSvg, null))));
    return (React.createElement(Modal, { "$size": size, "$header": _header, "$actionBar": _actionBar, "$onClose": onClose, className: classNames('assessment-modal assessment-modal-page'), ref: ref }, children));
});
