import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Button, ButtonGroup, Center, HStack, Icon, IconButton, Image, Text, useDisclosure, useMediaQuery, } from "@chakra-ui/react";
import { Share } from "@feedloop/icon";
import { css } from "@emotion/react";
import { HashRouter } from "react-router-dom";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import ShareApplicationModal from "./ShareApplicationModal";
import DevicePreviewsMap from "../editor/DevicePreview/DevicePreviewsMap";
const PreviewPage = ({ children, application, }) => {
    const [isSmartPhoneSize] = useMediaQuery("(max-width: 767px)");
    const { isOpen, onOpen, onClose } = useDisclosure();
    const devices = React.useMemo(() => Object.keys(DevicePreviewsMap()), []);
    const [state, setState] = React.useState({ preview: devices[2] });
    const deviceIcon = ["Mobile", "IPad", "Desktop"];
    return (_jsxs("div", { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ display: "flex", flex: "1", borderBottom: "1px solid rgb(230, 233, 236)", height: "64px", padding: "22px 16px" }, { children: _jsx(Center, { children: _jsx(Image, { src: "/assets/logo.svg", alt: "Logo" }) }) })), _jsx(Box, Object.assign({ borderBottom: "1px solid rgb(230, 233, 236)", height: "64px", alignItems: "center", display: "flex", padding: "22px 16px" }, { children: _jsxs(HStack, { children: [!isSmartPhoneSize && _jsx(Text, Object.assign({ fontSize: "md" }, { children: "Select Platform" })), _jsx(Box, { children: _jsx(ButtonGroup, Object.assign({ variant: "solid", spacing: "2", p: 1, border: "1px", borderColor: "gray.200", borderRadius: "md" }, { children: devices.map((device, index) => (_jsx(IconButton, { "aria-label": device, borderRadius: "md", bg: state.preview === device ? "#0065FF" : undefined, onClick: () => {
                                                const preview = device;
                                                setState({ preview });
                                            }, icon: _jsx(Icon, { boxSize: "20px", as: iconsList[deviceIcon[index]], color: state.preview === device ? "white" : "black" }), colorScheme: state.preview === device ? "blue" : "white" }, device))) })) }), _jsx(Button, Object.assign({ size: "sm", onClick: onOpen, bg: "#0065FF", colorScheme: "brand", leftIcon: _jsx(Share, {}) }, { children: "Share" })), _jsx(ShareApplicationModal, { isOpen: isOpen, onClose: onClose, appsName: application.name, appsDescription: application.description, appsSlug: application.slug })] }) }))] })), _jsx(Box, Object.assign({ display: "flex", flex: "1", css: css `
          height: calc(100vh - 64px);
          position: relative;
        ` }, { children: _jsx(HashRouter, { children: children }) }))] }));
};
export default PreviewPage;
//# sourceMappingURL=PreviewPage.js.map