import React, { useRef } from "react";
import { Button } from "../button/index.js";
import { useDialogContext } from "../dialog/root/DialogRoot.context.js";
import { Modal } from "../modal/index.js";
import { useModalContext } from "../modal/Modal.context.js";
import { Popover } from "../popover/index.js";
import { cl } from "../utils/helpers/index.js";
import { focusElement } from "../utils/helpers/focus.js";
import { useMedia } from "../utils/hooks/index.js";
import { useI18n } from "../utils/i18n/i18n.hooks.js";
import { getGlobalTranslations } from "./Date.locale.js";
const variantToLabel = {
    single: "chooseDate",
    multiple: "chooseDates",
    range: "chooseDateRange",
    month: "chooseMonth",
};
const DateDialog = ({ open, children, onClose, anchor, locale, translate, variant, popoverProps, popupLabelId, }) => {
    const translateGlobal = useI18n("global", getGlobalTranslations(locale));
    const modalRef = useRef(null);
    const isInModal = useModalContext(false) !== undefined;
    const isInDialog = useDialogContext(false) !== undefined;
    const hideModal = useMedia("screen and (min-width: 768px)", true) &&
        !isInModal &&
        !isInDialog;
    if (!open) {
        return null;
    }
    if (hideModal) {
        return (React.createElement(Popover, Object.assign({ anchorEl: anchor, open: open, onClose: onClose, placement: "bottom-start", className: cl("aksel-date__popover", {
                "aksel-date": variant === "month",
            }) }, popoverProps, { ref: focusPopoverOnOpen, tabIndex: -1, role: "dialog", "aria-labelledby": popupLabelId }), children));
    }
    return (React.createElement(Modal, { ref: modalRef, open: open, onClose: (event) => {
            event.stopPropagation();
            onClose();
        }, "aria-label": translate(variantToLabel[variant]), className: cl("aksel-date__modal", {
            "aksel-date__nested-modal": isInModal,
            "aksel-date": variant === "month",
        }), closeOnBackdropClick: true, placement: "top" },
        React.createElement("div", { className: "aksel-date__modal-body" },
            children,
            React.createElement(Button, { variant: "tertiary", onClick: () => { var _a; return (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, size: "small", type: "button" }, translateGlobal("close")))));
};
function focusPopoverOnOpen(element) {
    focusElement(element, { preventScroll: true, sync: false });
}
export { DateDialog };
//# sourceMappingURL=Date.Dialog.js.map