import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { css, CacheProvider } from "@emotion/react";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import createCache from "@emotion/cache";
import weakMemoize from "@emotion/weak-memoize";
import Frame, { FrameContextConsumer } from "react-frame-component";
import { Icon, Box } from "@chakra-ui/react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
export var DevicePreviewType;
(function (DevicePreviewType) {
    DevicePreviewType["EDITOR"] = "Editor";
    DevicePreviewType["PREVIEW"] = "Preview";
})(DevicePreviewType || (DevicePreviewType = {}));
const memoizedCreateCacheWithContainer = weakMemoize((container) => {
    // @ts-ignore
    const newCache = createCache({ key: "runtime", container });
    return newCache;
});
export const FrameProvider = ({ children, }) => (_jsx(FrameContextConsumer, { children: ({ document, window }) => {
        return (_jsx(CacheProvider, Object.assign({ value: memoizedCreateCacheWithContainer(document.head) }, { children: _jsx(DndProvider, Object.assign({ backend: HTML5Backend, context: window }, { children: children })) })));
    } }));
const Phone = ({ type, children }) => (_jsxs(Box, Object.assign({ css: css `
      position: absolute;
      width: 400px;
      height: 736px;
      left: calc(50% - 376px / 2);
      top: calc(50% - 736px / 2 + 2px);
      ${type === DevicePreviewType.PREVIEW ? "background: #001e4d" : ""};
      border: 2px
        ${type === DevicePreviewType.EDITOR
        ? "dashed #329922"
        : "solid #001e4d"};
      border-radius: 32px;
    ` }, { children: [_jsx("div", { css: css `
        position: absolute;
        width: 164px;
        height: 8px;
        left: calc(50% - 164px / 2 - 8px);
        top: calc(50% - 8px / 2 - 338px);
        border: 1px solid
          ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        box-sizing: border-box;
        border-radius: 8px;
      ` }), _jsx("div", { css: css `
        position: absolute;
        width: 8px;
        height: 8px;
        left: calc(50% - 8px / 2 + 86px);
        top: calc(50% - 8px / 2 - 338px);
        border: 1px solid
          ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        box-sizing: border-box;
        border-radius: 8px;
      ` }), _jsxs("div", Object.assign({ css: css `
        position: absolute;
        width: 360px;
        height: 640px;
        left: calc(50% - 360px / 2);
        top: calc(50% - 640px / 2 + 2px);
        background: #ffffff;
      ` }, { children: [type === DevicePreviewType.EDITOR && (_jsxs(_Fragment, { children: [_jsx("div", { css: css `
              position: absolute;
              width: 376px;
              height: 0px;
              left: calc(50% - 376px / 2);
              top: calc(50% - 0px / 2 - 322px);
              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 0px;
              height: 656px;
              left: calc(50% - 0px / 2 + 180px);
              top: calc(50% - 660px / 2 + 2px);
              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 376px;
              height: 0px;
              left: calc(50% - 376px / 2);
              top: calc(50% - 0px / 2 + 318px);
              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 0px;
              height: 656px;
              left: calc(50% - 0px / 2 - 180px);
              top: calc(50% - 660px / 2 + 2px);
              border: 1px solid #329922;
            ` })] })), _jsx(Frame, Object.assign({ style: { width: "100%", height: "100%" } }, { children: _jsx(FrameProvider, { children: children }) }))] })), _jsxs("div", Object.assign({ css: css `
        position: absolute;
        width: 188px;
        height: 30px;
        left: 94px;
        top: 695px;
      ` }, { children: [_jsx("div", Object.assign({ css: css `
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["ChevronLeft"], css: css `
            width: 30px;
            height: 30px;
          `, cursor: "pointer" }) })), _jsx("div", Object.assign({ css: css `
          left: 90px;
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["Circle"], css: css `
            left: 180px;
            padding: 0px;
            width: 25px;
            height: 25px;
          `, cursor: "pointer" }) })), _jsx("div", Object.assign({ css: css `
          left: 175px;
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["Checkbox"], css: css `
            width: 25px;
            height: 25px;
          `, cursor: "pointer" }) }))] }))] })));
const Tablet = ({ type, children }) => (_jsxs(Box, Object.assign({ css: css `
      position: absolute;
      width: 800px;
      height: 560px;
      left: calc(50% - 800px / 2);
      top: calc(50% - 560px / 2);

      ${type === DevicePreviewType.PREVIEW ? "background: #001e4d" : ""};

      /* Green/Base */

      border: 2px dashed
        ${type === DevicePreviewType.EDITOR ? "#329922" : "#001e4d"};
      border-radius: 32px;
    ` }, { children: [_jsxs("div", Object.assign({ css: css `
        position: absolute;
        width: 180px;
        height: 8px;
        left: 685px;
        top: 276px;

        transform: rotate(90deg);
      ` }, { children: [_jsx("div", { css: css `
          position: absolute;
          width: 164px;
          height: 8px;

          /* Green/Base */

          border: 1px solid
            ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
          box-sizing: border-box;
          border-radius: 8px;
        ` }), _jsx("div", { css: css `
          position: absolute;
          width: 8px;
          height: 8px;
          left: 170px;

          /* Green/Base */

          border: 1px solid
            ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
          box-sizing: border-box;
          border-radius: 8px;
          transform: rotate(90deg);
        ` })] })), _jsxs("div", Object.assign({ css: css `
        position: absolute;
        width: 704px;
        height: 520px;
        top: 17px;
        left: 56px;
      ` }, { children: [type === DevicePreviewType.EDITOR && (_jsxs(_Fragment, { children: [_jsx("div", { css: css `
              position: absolute;
              width: 720px;
              height: 0px;
              left: calc(50% - 720px / 2);
              top: calc(50% - 0px / 2 - 260px);

              /* Green/Base */

              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 0px;
              height: 535px;
              left: calc(50% - 0px / 2 + 352px);
              top: calc(50% - 535px / 2);

              /* Green/Base */

              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 720px;
              height: 0px;
              left: calc(50% - 720px / 2);
              top: calc(50% - 0px / 2 + 259px);

              /* Green/Base */

              border: 1px solid #329922;
            ` }), _jsx("div", { css: css `
              position: absolute;
              width: 0px;
              height: 535px;
              left: calc(50% - 0px / 2 - 352px);
              top: calc(50% - 535px / 2);

              /* Green/Base */

              border: 1px solid #329922;
            ` })] })), _jsx(Frame, Object.assign({ style: { width: "100%", height: "100%" } }, { children: _jsx(FrameProvider, { children: children }) }))] })), _jsxs("div", Object.assign({ css: css `
        position: absolute;
        width: 188px;
        height: 20px;
        left: -60px;
        top: 263px;

        transform: rotate(90deg);
      ` }, { children: [_jsx("div", Object.assign({ css: css `
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["ChevronLeft"], css: css `
            width: 30px;
            height: 30px;
          `, cursor: "pointer" }) })), _jsx("div", Object.assign({ css: css `
          left: 90px;
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["Circle"], css: css `
            left: 180px;
            padding: 0px;
            width: 25px;
            height: 25px;
          `, cursor: "pointer" }) })), _jsx("div", Object.assign({ css: css `
          left: 175px;
          position: absolute;
          color: ${type === DevicePreviewType.EDITOR ? "#329922" : "#ffffff"};
        ` }, { children: _jsx(Icon, { as: iconsList["Checkbox"], css: css `
            width: 25px;
            height: 25px;
          `, cursor: "pointer" }) }))] }))] })));
const Desktop = ({ type, children }) => {
    if (type === DevicePreviewType.PREVIEW) {
        return (_jsx(Box, { children: _jsx("div", Object.assign({ css: css `
            width: 100vw;
            height: calc(100vh - 64px);
          ` }, { children: _jsx(Frame, Object.assign({ style: { width: "100%", height: "100%" } }, { children: _jsx(FrameProvider, { children: children }) })) })) }));
    }
    return (_jsxs(Box, Object.assign({ css: css `
        position: absolute;
        width: 1192px;
        height: 650px;
        left: calc(50% - 1192px / 2);
        top: calc(50% - 632px / 2 + 2px);

        /* Green/Base */
        border: 2px dashed #329922;
        border-radius: 32px;
      ` }, { children: [_jsxs("div", Object.assign({ css: css `
          position: absolute;
          width: 1126px;
          height: 563px;
          left: 32px;
          top: 32px;
          border: 1px solid #329922;
        ` }, { children: [_jsx("div", { css: css `
            position: absolute;
            width: 1156px;
            height: 0px;
            left: calc(50% - 1156px / 2);
            top: calc(50% - 0px / 2 - 283px);

            /* Green/Base */

            border: 1px solid #329922;
          ` }), _jsx("div", { css: css `
            position: absolute;
            width: 0px;
            height: 590px;
            left: calc(50% - 0px / 2 + 561px);
            top: calc(50% - 570px / 2 - 11px);

            /* Green/Base */

            border: 1px solid #329922;
          ` }), _jsx("div", { css: css `
            position: absolute;
            width: 1156px;
            height: 0px;
            left: calc(50% - 1156px / 2);
            top: calc(50% - 0px / 2 + 280px);

            /* Green/Base */

            border: 1px solid #329922;
          ` }), _jsx("div", { css: css `
            position: absolute;
            width: 0px;
            height: 590px;
            left: calc(50% - 0px / 2 - 563px);
            top: calc(50% - 570px / 2 - 11px);

            /* Green/Base */

            border: 1px solid #329922;
          ` }), _jsx(Frame, Object.assign({ style: { width: "100%", height: "100%" } }, { children: _jsx(FrameProvider, { children: children }) }))] })), _jsx("div", Object.assign({ css: css `
          top: 610px;
          left: 519px;
          position: absolute;
          color: #329922;
        ` }, { children: _jsx(Icon, { as: iconsList["Circle"], css: css `
            left: 180px;
            padding: 0px;
            width: 25px;
            height: 25px;
          `, cursor: "pointer" }) }))] })));
};
export const DevicePreviewsMap = (type = DevicePreviewType.EDITOR) => {
    return {
        Phone: {
            width: 420,
            height: 912,
            Component: ({ children }) => _jsx(Phone, Object.assign({ type: type }, { children: children })),
        },
        Tablet: {
            height: 948,
            width: 626,
            Component: ({ children }) => _jsx(Tablet, Object.assign({ type: type }, { children: children })),
        },
        Desktop: {
            width: 1192,
            height: 600,
            Component: ({ children }) => _jsx(Desktop, Object.assign({ type: type }, { children: children })),
        },
    };
};
export default DevicePreviewsMap;
//# sourceMappingURL=DevicePreviewsMap.js.map