import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import EditorContext from "./EditorContext";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { Box, useMediaQuery } from "@chakra-ui/react";
import { directionMotion, duration } from "./directionMotion";
import { RuntimeContext } from "@qorebase/app-component";
import NavigationList from "./NavigationList";
import InAppInstalPromotion from "./InAppInstalPromotion";
import * as queryString from "./utils/query-string";
import { usePageParam } from "./hooks/usePageParam";
export const MotionBox = motion(Box);
const exitBackDirection = {
    slideRight: "slideLeft",
    slideLeft: "slideRight",
    slideUp: "slideDown",
    slideDown: "slideUp",
    scale: "none",
    fade: "none",
};
const ComposerContext = React.createContext({
    modalPageHistoryLength: 0,
    direction: "none",
    exitDirection: "none",
    setDirection: () => null,
    setExitDirection: () => null,
    forward: () => null,
    back: () => null,
    setModalPageHistoryLength: () => null,
});
export const Composer = ({ children }) => {
    const [direction, setDirection] = React.useState("none");
    const [exitDirection, setExitDirection] = React.useState("none");
    const [modalPageHistoryLength, setModalPageHistoryLength] = React.useState(0);
    const navigate = useNavigate();
    const location = useLocation();
    const forward = React.useCallback((url, opts) => {
        var _a;
        setExitDirection(((_a = opts === null || opts === void 0 ? void 0 : opts.state) === null || _a === void 0 ? void 0 : _a.direction) || "none");
        if (opts === null || opts === void 0 ? void 0 : opts.modalPage)
            setModalPageHistoryLength((state) => state + 1);
        (opts === null || opts === void 0 ? void 0 : opts.state)
            ? navigate(url, { state: Object.assign(Object.assign({}, location.state), opts.state) })
            : navigate(url);
    }, [navigate, location.state]);
    const back = React.useCallback((opts) => {
        if (!(opts === null || opts === void 0 ? void 0 : opts.modalPage)) {
            setExitDirection(exitBackDirection[direction]);
        }
        else {
            setDirection(direction);
            setModalPageHistoryLength((state) => (state === 0 ? 0 : state - 1));
        }
        if (history.length === 1) {
            (opts === null || opts === void 0 ? void 0 : opts.state) ? navigate("/", { state: opts.state }) : navigate("/");
        }
        else {
            navigate(-1);
        }
    }, [navigate, direction, location.pathname]);
    return (_jsx(ComposerContext.Provider, Object.assign({ value: {
            direction,
            exitDirection,
            setDirection,
            setExitDirection,
            forward,
            back,
            modalPageHistoryLength,
            setModalPageHistoryLength,
        } }, { children: children })));
};
export const useComposer = () => React.useContext(ComposerContext);
export const TransitionLink = (_a) => {
    var { children, direction } = _a, props = __rest(_a, ["children", "direction"]);
    return _jsx(Link, Object.assign({}, props, { children: children }));
};
export const Scene = ({ children }) => {
    var _a, _b, _c;
    const { direction, exitDirection, setDirection } = useComposer();
    const location = useLocation();
    const query = React.useMemo(() => queryString.parse(location.search), [location.search]);
    React.useEffect(() => {
        const timeout = setTimeout(() => {
            setDirection(exitDirection);
        }, duration * 1000);
        return () => clearTimeout(timeout);
    }, [exitDirection]);
    const modalPage = RuntimeContext.useSelectState((runtime) => { var _a; return runtime.maps.page[((_a = queryString.parse(location.search)) === null || _a === void 0 ? void 0 : _a.modalPage) || ""]; });
    const pageParam = usePageParam();
    const currentPage = RuntimeContext.useSelectState((state) => state.maps.page[pageParam]);
    const [mediumScreen] = useMediaQuery(["(max-width: 48em)"]);
    const screen = EditorContext.useSelectState((state) => state.screen);
    const navs = RuntimeContext.useSelectState((state) => state.navbar.bottom);
    const showBottomNav = React.useMemo(() => (mediumScreen || screen !== "large") &&
        (currentPage === null || currentPage === void 0 ? void 0 : currentPage.navbar.bottom.show) &&
        navs.content.length > 0, [mediumScreen, screen, currentPage === null || currentPage === void 0 ? void 0 : currentPage.navbar.bottom.show, navs.content.length]);
    return (_jsxs(Box, Object.assign({ w: "full", h: "full", pb: showBottomNav ? "55px" : 0, bg: "bg.900" }, { children: [mediumScreen ? (_jsxs(MotionBox, Object.assign({ initial: (query === null || query === void 0 ? void 0 : query.modalPage) ? false : (_a = directionMotion[exitDirection]) === null || _a === void 0 ? void 0 : _a.initial, animate: (query === null || query === void 0 ? void 0 : query.modalPage) ? false : (_b = directionMotion[direction]) === null || _b === void 0 ? void 0 : _b.animate, exit: (_c = directionMotion[exitDirection]) === null || _c === void 0 ? void 0 : _c.exit, position: "absolute", top: 0, bottom: 0, left: 0, right: 0, bgColor: "brand.900", overflow: "unset", height: "full" }, { children: [_jsx(MotionBox, Object.assign({ position: "absolute", top: 0, right: 0, left: 0, bottom: 0, overflow: "unset", animate: {
                            transition: {
                                duration,
                                ease: "easeOut",
                            },
                            bottom: !modalPage && showBottomNav ? "55px" : 0,
                        } }, { children: children })), _jsx(InAppInstalPromotion, {})] }), "motion-box")) : (_jsx(Box, Object.assign({ inset: 0, bgColor: "brand.900", overflow: "unset", height: "full" }, { children: children }), "no-motion")), !modalPage && showBottomNav && _jsx(NavigationList, {}), _jsx(InAppInstalPromotion, {})] })));
};
//# sourceMappingURL=Composer.js.map