"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 util_1 = require("./util");
const image_1 = __importDefault(require("./image"));
const config_1 = require("lib/config");
const showcase = {
    width: "100%",
    boxShadow: "2px 2px 4px rgb(0 0 0 / 25%), 0 2px 4px rgb(0 0 0 / 22%)",
    borderRadius: "3px",
};
function Info(props) {
    const { anchor, icon, title, image, alt, video, caption, children, wide, swapCols, textStyleExtra, } = props;
    const head = ((0, jsx_runtime_1.jsxs)("h1", { id: anchor, style: { textAlign: "center", marginBottom: "20px", color: "#333" }, children: [icon && ((0, jsx_runtime_1.jsxs)("span", { style: { fontSize: "24pt", marginRight: "5px" }, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: icon }), " "] })), title] }));
    let graphic = null;
    if (image != null) {
        graphic = (0, jsx_runtime_1.jsx)(image_1.default, { style: showcase, src: image, alt: alt ?? caption });
    }
    else if (video != null) {
        const videoSrcs = typeof video == "string" ? [video] : video;
        verifyHasMp4(videoSrcs);
        graphic = ((0, jsx_runtime_1.jsx)("div", { style: { position: "relative", width: "100%" }, children: (0, jsx_runtime_1.jsx)("video", { style: showcase, loop: true, controls: true, children: sources(videoSrcs) }) }));
    }
    if (graphic != null && caption != null) {
        graphic = ((0, jsx_runtime_1.jsxs)("div", { children: [graphic, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", color: "#666", fontSize: "13pt" }, children: caption })] }));
    }
    if (!graphic) {
        const noGraphicTextStyle = {
            background: "#fafafa",
            padding: "20px",
            marginBottom: "15px",
        };
        if (textStyleExtra != null) {
            // if textColStyleExtra is given, then merge it into noGraphicTextStyle.
            Object.assign(noGraphicTextStyle, textStyleExtra);
        }
        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: config_1.MAX_WIDTH, margin: "0 auto" }, children: (0, jsx_runtime_1.jsxs)("div", { style: noGraphicTextStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center" }, children: head }), (0, jsx_runtime_1.jsx)("div", { style: { margin: "auto", maxWidth: wide ? "600px" : undefined }, children: children })] }) }) }));
    }
    const textColStyle = {
        border: "1px solid white",
        borderRadius: "5px",
        padding: "0 20px 0 20px",
        marginBottom: "15px",
        display: "flex",
        justifyContent: "start",
        alignContent: "start",
        flexDirection: "column",
        fontSize: "12pt",
    };
    if (textStyleExtra != null) {
        // if textColStyleExtra is given, then merge it into textColStyle.
        Object.assign(textColStyle, textStyleExtra);
    }
    const textCol = ((0, jsx_runtime_1.jsx)(antd_1.Col, { lg: wide ? 7 : 9, style: textColStyle, children: children }, "text"));
    const graphicCol = ((0, jsx_runtime_1.jsx)(antd_1.Col, { lg: wide ? 17 : 15, style: { padding: "0 30px", width: "100%" }, children: graphic }, "graphics"));
    const cols = swapCols ? [textCol, graphicCol] : [graphicCol, textCol];
    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: "60px 5%", background: "white", fontSize: "11pt" }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [head, (0, jsx_runtime_1.jsx)(antd_1.Row, { children: cols })] }) }));
}
exports.default = Info;
function sources(video) {
    const v = [];
    for (const x of video) {
        v.push((0, jsx_runtime_1.jsx)("source", { src: (0, util_1.MediaURL)(x) }, x));
    }
    return v;
}
function verifyHasMp4(video) {
    for (const x of video) {
        if (x.endsWith(".mp4")) {
            return;
        }
    }
    console.warn("include mp4 format for the video, so that it is viewable on iOS!!", video);
}
Info.Heading = ({ children, description, style }) => {
    return ((0, jsx_runtime_1.jsxs)("div", { style: {
            ...{ textAlign: "center", margin: "40px" },
            ...style,
        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                    fontSize: "400%",
                    color: "#444",
                }, children: children }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "13pt", color: "#666" }, children: description })] }));
};
//# sourceMappingURL=info.js.map