import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Icon, IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text, useDisclosure, useMediaQuery, } from "@chakra-ui/react";
import React from "react";
import { useLocation } from "react-router-dom";
import { Page } from "./ActivePage";
import iconsList from "./components/iconsList";
import { useComposer } from "./Composer";
import { useRefreshDataContext } from "./hooks/useRefreshData";
import { useModalPageSource } from "./hooks/useSource";
import { RuntimeContext } from "@qorebase/app-component";
import { RuntimeInputProvider } from "./RuntimeInput";
import * as queryString from "./utils/query-string";
import { VariablesProvider } from "./VariablesContext";
export default function ModalPage() {
    const [mobileView] = useMediaQuery("(max-width: 767px)");
    const location = useLocation();
    const compose = useComposer();
    const query = React.useMemo(() => queryString.parse(location.search), [location.search]);
    const stateLocation = useLocation().state;
    const disclosure = useDisclosure();
    const { refreshData } = useRefreshDataContext();
    const [dir, setDir] = React.useState(null);
    React.useEffect(() => {
        query.modalPage && disclosure.onOpen();
    }, [query.modalPage]);
    const page = RuntimeContext.useSelectState((runtime) => runtime.maps.page[query.modalPage || ""]);
    React.useEffect(() => {
        if (stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.direction) {
            setDir(stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.direction);
        }
    }, [location.search, stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.direction]);
    const source = useModalPageSource();
    const handleClose = React.useCallback(() => {
        disclosure.onClose();
        compose.setModalPageHistoryLength(0);
        setTimeout(() => {
            compose.back({ modalPage: true });
            refreshData();
        }, 300);
    }, [location.pathname, query, refreshData]);
    const handleBackButton = React.useCallback(() => compose.back({ modalPage: true }), [compose]);
    const variables = React.useMemo(() => {
        const parsed = queryString.parse(location.search);
        const modalRowId = (parsed === null || parsed === void 0 ? void 0 : parsed.modalRowId) || "";
        return { rowId: modalRowId, modalRowId };
    }, [location.search]);
    if (!page)
        return null;
    return (_jsxs(Modal, Object.assign({ isOpen: disclosure.isOpen, onClose: handleClose, scrollBehavior: "inside", trapFocus: false, size: "xl", isCentered: true, motionPreset: dir }, { children: [_jsx(ModalOverlay, {}), _jsx(VariablesProvider, Object.assign({ values: variables }, { children: _jsxs(ModalContent, Object.assign({ position: mobileView ? "absolute" : undefined, bottom: mobileView && 0, margin: mobileView && 0, borderBottomRadius: mobileView && 0, height: (stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.modalH) || "75%", maxHeight: mobileView && "100%" }, { children: [_jsx(ModalCloseButton, {}), _jsxs(ModalHeader, Object.assign({ textAlign: mobileView ? "center" : undefined }, { children: [compose.modalPageHistoryLength > 0 && (_jsx(IconButton, { position: "absolute", left: 0, variant: "unstyled", "aria-label": "modal-back", icon: _jsx(Icon, { as: iconsList["ArrowLeft"] }), onClick: handleBackButton })), _jsx(Text, Object.assign({ fontSize: "inherit", ml: "0.6rem" }, { children: page.title }))] })), _jsx(ModalBody, Object.assign({ padding: mobileView && 0 }, { children: _jsx(Box, Object.assign({ position: "relative", height: "100%" }, { children: _jsx(Box, Object.assign({ position: "absolute", top: "0", left: "0", right: "0", bottom: "0" }, { children: disclosure.isOpen && (_jsx(RuntimeInputProvider, { children: _jsx(Page, { page: page, source: source, excludeNavigation: true }) })) })) })) }))] })) }))] })));
}
//# sourceMappingURL=ModalPage.js.map