import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, ButtonGroup, Center, Flex, IconButton, Tooltip, Text, Button, } from "@chakra-ui/react";
import { Mobile, IPad, Desktop, Template, DockTop, DockBottom, } from "@feedloop/icon";
import { useDrop } from "react-dnd";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
const SCREEN_CONFIGS = {
    small: {
        // width: "360px",
        width: "22.5rem",
    },
    medium: {
        // width: "767px",
        width: "48rem",
    },
    large: {
        // width: "1360px",
        width: "85rem",
    },
};
const BrowserPanel = () => {
    const screen = EditorContext.useSelectState((state) => state.screen);
    const rightPanel = EditorContext.useSelectState((state) => state.rightPanel);
    const pageId = usePageParam();
    const pageTitle = RuntimeContext.useSelectState((state) => { var _a; return (_a = state.maps.page[pageId]) === null || _a === void 0 ? void 0 : _a.title; });
    const { setScreen, setRightPanel, setNavbarPanel } = EditorContext.useActions();
    const buttonStyle = {
        fontSize: "md",
        color: "white",
        _active: {
            bg: "whiteAlpha.300",
        },
    };
    return (_jsxs(Flex, Object.assign({ bg: "blackAlpha.800", h: "10", justifyContent: "space-between" }, { children: [_jsx(Flex, Object.assign({ gap: "2", h: "full", alignItems: "center", px: "4" }, { children: Array.from(Array(3)).map((_, i) => (_jsx(Box, { boxSize: "8px", rounded: "full", bg: "white" }, i))) })), _jsx(Flex, Object.assign({ flex: "1", py: "2", maxW: "480px" }, { children: _jsx(Flex, Object.assign({ alignItems: "center", flex: "1", bg: "whiteAlpha.300", px: "3", rounded: "md" }, { children: _jsx(Text, Object.assign({ color: "white", noOfLines: 1 }, { children: pageTitle || "Page" })) })) })), _jsx(Flex, Object.assign({ alignItems: "center", px: "3" }, { children: _jsxs(ButtonGroup, Object.assign({ size: "xs", variant: "ghost", colorScheme: "whiteAlpha" }, { children: [_jsx(Tooltip, Object.assign({ label: "Small screen", openDelay: 500, placement: "right-start", hasArrow: true, rounded: "md", arrowSize: 8, closeOnMouseDown: true }, { children: _jsx(IconButton, Object.assign({ isActive: screen === "small", "aria-label": "Edit", icon: _jsx(Mobile, {}) }, buttonStyle, { onClick: () => {
                                    setScreen("small");
                                    if (["navbar", "navbar content"].includes(rightPanel.type)) {
                                        setNavbarPanel({ type: "bottom" });
                                        setRightPanel({ type: "navbar" });
                                    }
                                } })) })), _jsx(Tooltip, Object.assign({ label: "Medium screen", openDelay: 500, placement: "right-start", hasArrow: true, rounded: "md", arrowSize: 8, closeOnMouseDown: true }, { children: _jsx(IconButton, Object.assign({ isActive: screen === "medium", "aria-label": "Play", icon: _jsx(IPad, {}) }, buttonStyle, { onClick: () => {
                                    setScreen("medium");
                                    if (["navbar", "navbar content"].includes(rightPanel.type)) {
                                        setNavbarPanel({ type: "bottom" });
                                        setRightPanel({ type: "navbar" });
                                    }
                                } })) })), _jsx(Tooltip, Object.assign({ label: "Large screen", openDelay: 500, placement: "right-start", hasArrow: true, rounded: "md", arrowSize: 8, closeOnMouseDown: true }, { children: _jsx(IconButton, Object.assign({ isActive: screen === "large", "aria-label": "Play", icon: _jsx(Desktop, {}) }, buttonStyle, { onClick: () => {
                                    setScreen("large");
                                    if (["navbar", "navbar content"].includes(rightPanel.type)) {
                                        setNavbarPanel({ type: "sidetop" });
                                        setRightPanel({ type: "navbar" });
                                    }
                                } })) }))] })) }))] })));
};
const Player = ({ children }) => {
    const editorActions = EditorContext.useActions();
    const screen = EditorContext.useSelectState((state) => state.screen);
    const rightPanel = EditorContext.useSelectState((state) => state.rightPanel);
    const screenConfig = SCREEN_CONFIGS[screen];
    const pageParam = usePageParam();
    const currentPage = RuntimeContext.useSelectState((state) => state.maps.page[pageParam]);
    const hasBottomNav = React.useMemo(() => !["system"].includes(currentPage === null || currentPage === void 0 ? void 0 : currentPage.type), [currentPage === null || currentPage === void 0 ? void 0 : currentPage.type]);
    const [{ canDrop, isOver }, drop] = useDrop(() => ({
        accept: ["element", "layout", "container"],
        drop: (item, monitor) => {
            const didDrop = monitor.didDrop();
            if (didDrop) {
                return;
            }
            return {};
        },
        collect: (monitor) => ({
            isOver: monitor.isOver({ shallow: true }),
            canDrop: monitor.canDrop(),
        }),
    }));
    const buttonStyle = React.useMemo(() => ({
        fontSize: "sm",
        fontWeight: "normal",
        bg: "white",
        color: "gray.900",
        _active: {
            color: "blue.500",
            bg: "blue.50",
            border: "1px solid #0065FF",
        },
    }), []);
    return (_jsxs(Flex, Object.assign({ flex: "1", direction: screen === "large" ? "column" : "row", p: "4", gap: "2" }, { children: [_jsx(Center, Object.assign({ hidden: screen !== "large" }, { children: _jsxs(ButtonGroup, Object.assign({ size: "xs", w: `${screenConfig.width}`, variant: "outline", px: "4", gap: "2", transition: "width 200ms ease-out" }, { children: [_jsx(Button, Object.assign({}, buttonStyle, { leftIcon: _jsx(Template, {}), isActive: rightPanel.type === "navbar" ||
                                rightPanel.type === "navbar content", onClick: () => {
                                editorActions.setRightPanel({ type: "navbar" });
                                editorActions.setNavbarPanel({ type: "sidetop" });
                            } }, { children: "Side/Top Nav" })), _jsx(Button, Object.assign({}, buttonStyle, { leftIcon: _jsx(DockTop, {}), hidden: true }, { children: "Header" }))] })) })), _jsxs(Center, Object.assign({ flex: "1", gap: "2" }, { children: [_jsxs(ButtonGroup, Object.assign({ display: "flex", flexDir: "column", justifyContent: "space-between", pt: "10", h: "full", size: "xs", hidden: screen === "large" || !hasBottomNav }, { children: [_jsx(Tooltip, Object.assign({ label: "Header", openDelay: 500, placement: "left", hasArrow: true, rounded: "md", arrowSize: 8, mr: 2, closeOnMouseDown: true }, { children: _jsx(Center, Object.assign({ h: "55px" }, { children: _jsx(IconButton, Object.assign({}, buttonStyle, { "aria-label": "header", icon: _jsx(DockTop, {}), hidden: true })) })) })), _jsx(Tooltip, Object.assign({ label: "Bottom Navbar", openDelay: 500, placement: "left", hasArrow: true, rounded: "md", arrowSize: 8, mr: 2, closeOnMouseDown: true }, { children: _jsx(Center, Object.assign({ h: "55px" }, { children: _jsx(IconButton, Object.assign({}, buttonStyle, { "aria-label": "bottom", icon: _jsx(DockBottom, {}), isActive: rightPanel.type === "navbar" ||
                                            rightPanel.type === "navbar content", onClick: () => {
                                            editorActions.setRightPanel({ type: "navbar" });
                                            editorActions.setNavbarPanel({ type: "bottom" });
                                        } })) })) }))] })), _jsxs(Flex, Object.assign({ direction: "column", w: `${screenConfig.width}`, h: "full", bg: "white", borderTopRadius: "xl", borderBottomRadius: "md", overflow: "hidden", transition: "width 200ms ease-out" }, { children: [_jsx(BrowserPanel, {}), _jsxs(Flex, Object.assign({ ref: drop, position: "relative", flex: "1", overflow: "hidden" }, { children: [children, isOver && canDrop && (_jsx(Box, { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, zIndex: 1, bg: "blue.100", opacity: 0.3, border: "2px", borderColor: "blue.400", rounded: "md", pointerEvents: "none" }))] }))] }))] }))] })));
};
export default Player;
//# sourceMappingURL=Player.js.map