"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const antd_1 = require("antd");
const icon_1 = require("@cocalc/frontend/components/icon");
const react_1 = require("react");
const site_name_1 = __importDefault(require("components/share/site-name"));
const A_1 = __importDefault(require("components/misc/A"));
const misc_1 = require("@cocalc/util/misc");
function IFrame({ src: src0, appURL, path, style, fullscreen: fullscreen0, start: start0, description, }) {
    const [fullscreen, setFullscreen] = (0, react_1.useState)(!!fullscreen0);
    const [reload, setReload] = (0, react_1.useState)(0);
    const iframeRef = (0, react_1.useRef)(null);
    const [start, setStart] = (0, react_1.useState)(!!start0);
    const url = new URL("http://example.com" + src0);
    url.search += (url.search ? "&" : "") + `reload=${reload}`;
    const src = url.pathname + url.search + url.hash;
    return ((0, jsx_runtime_1.jsxs)("div", { style: fullscreen
            ? {
                position: "fixed",
                top: 0,
                left: 0,
                width: "100vw",
                height: "100vh",
                zIndex: 1000,
                background: "white",
            }
            : {
                padding: "5px 15px",
                height: start ? "70vh" : undefined,
                border: "1px solid #ddd",
                borderRadius: "5px",
                boxShadow: "5px 5px 5px #eee",
                display: "flex",
                flexDirection: "column",
                background: "white",
                ...style,
            }, children: [(0, jsx_runtime_1.jsx)("div", { children: start && ((0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { title: "Reload this", size: "small", type: "text", onClick: () => {
                                setReload(reload + 1);
                                //iframeRef.current?.contentWindow.location.reload();
                            }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "reload" }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                                flex: 1,
                                textAlign: "center",
                                paddingTop: "2.5px",
                                paddingLeft: fullscreen ? "15px" : undefined,
                            }, children: appURL && ((0, jsx_runtime_1.jsx)(antd_1.Popover, { title: "Open in the App", content: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: "350px" }, children: ["Open ", path, " in the ", (0, jsx_runtime_1.jsx)(site_name_1.default, {}), " app for more options and to see your other files..."] }), children: (0, jsx_runtime_1.jsxs)(A_1.default, { href: appURL, external: true, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "external-link", style: { marginRight: "5px" } }), path ? (0, misc_1.trunc_middle)(path, 50) : ""] }) })) }), (0, jsx_runtime_1.jsx)(antd_1.Button, { size: "small", type: "text", title: "Full screen", onClick: () => {
                                if (!fullscreen) {
                                    document.documentElement.requestFullscreen();
                                }
                                else {
                                    if (document.fullscreenElement) {
                                        document.exitFullscreen();
                                    }
                                }
                                setFullscreen(!fullscreen);
                            }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: fullscreen ? "compress" : "expand" }) })] })) }), start && (0, jsx_runtime_1.jsx)("hr", { style: { width: "100%" } }), !start ? ((0, jsx_runtime_1.jsxs)(antd_1.Button, { style: { margin: "15px auto" }, size: "large", type: "primary", shape: "round", onClick: () => setStart(true), children: [(0, jsx_runtime_1.jsxs)("span", { style: { marginRight: "10px" }, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "run" }), " "] }), " ", "Load ", description ?? "Editor", "..."] })) : ((0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, src: src, width: "100%", height: "100%", frameBorder: "0" }))] }));
}
exports.default = IFrame;
//# sourceMappingURL=iframe.js.map