import React, { useRef } from 'react';
import { Portal, Box, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } from '@chakra-ui/react';
import { useI18n } from '../../../utilities/i18nInit.js';
import Stack from '../../stack/index.js';
import { FilterHeading } from '../Heading.js';
import FilterActionButton from '../ActionButton.js';

var Popover = function (_a) {
    var actionButton = _a.actionButton, Icon = _a.Icon, isApplied = _a.isApplied, enforceHeight = _a.enforceHeight, label = _a.label, numberOfAppliedFilters = _a.numberOfAppliedFilters, onClose = _a.onClose, onResetFilter = _a.onResetFilter, showCallToActionButton = _a.showCallToActionButton, header = _a.header, children = _a.children, _b = _a.zIndex, zIndex = _b === void 0 ? 'popover' : _b;
    var language = useI18n().language;
    var popoverContentRef = useRef(null);
    var maxHeight = showCallToActionButton
        ? '6xl'
        : 'calc(var(--chakra-sizes-6xl) + var(--call-to-action-height))';
    return (React.createElement(Portal, null,
        React.createElement(Box, { zIndex: zIndex, w: "full", h: "full", position: "relative" },
            React.createElement(PopoverContent, { backgroundColor: "white", borderRadius: "sm", shadow: "md", w: "6xl", minHeight: enforceHeight ? '7xl' : undefined, height: enforceHeight ? '7xl' : undefined, ref: popoverContentRef },
                React.createElement(Box, { as: Stack, h: "full", paddingY: "2xl" },
                    React.createElement(PopoverHeader, { paddingX: "2xl" }, header !== null && header !== void 0 ? header : (React.createElement(FilterHeading, { Icon: Icon, isApplied: isApplied, label: label, numberOfAppliedFilters: numberOfAppliedFilters, onClose: onClose, language: language, onResetFilter: onResetFilter, contentRef: popoverContentRef }))),
                    React.createElement(PopoverBody, { sx: {
                            '--call-to-action-height': 'calc(var(--chakra-sizes-lg) + var(--chakra-space-2xl))',
                        }, marginTop: "2xl", maxH: showCallToActionButton
                            ? '6xl'
                            : 'calc(var(--chakra-sizes-6xl) + var(--call-to-action-height))', marginBottom: showCallToActionButton ? '2xl' : '0', height: enforceHeight ? maxHeight : undefined, maxHeight: maxHeight, overflowY: "auto", paddingX: "2xl" }, children),
                    showCallToActionButton ? (React.createElement(PopoverFooter, { paddingX: "2xl" },
                        React.createElement(FilterActionButton, { actionButton: actionButton, isApplied: isApplied, onClose: onClose }))) : null)))));
};

export { Popover as default };
//# sourceMappingURL=Popover.js.map
