"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var icon_1 = require("@cocalc/frontend/components/icon");
var util_1 = require("./util");
var image_1 = __importDefault(require("./image"));
var config_1 = require("lib/config");
var 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) {
    var anchor = props.anchor, icon = props.icon, title = props.title, image = props.image, alt = props.alt, video = props.video, caption = props.caption, children = props.children, wide = props.wide, swapCols = props.swapCols, textStyleExtra = props.textStyleExtra;
    var head = ((0, jsx_runtime_1.jsxs)("h1", __assign({ id: anchor, style: { textAlign: "center", marginBottom: "20px", color: "#333" } }, { children: [icon && ((0, jsx_runtime_1.jsxs)("span", __assign({ style: { fontSize: "24pt", marginRight: "5px" } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: icon }), " "] }))), title] })));
    var graphic = null;
    if (image != null) {
        graphic = (0, jsx_runtime_1.jsx)(image_1.default, { style: showcase, src: image, alt: alt !== null && alt !== void 0 ? alt : caption });
    }
    else if (video != null) {
        var videoSrcs = typeof video == "string" ? [video] : video;
        verifyHasMp4(videoSrcs);
        graphic = ((0, jsx_runtime_1.jsx)("div", __assign({ style: { position: "relative", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)("video", __assign({ 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", __assign({ style: { textAlign: "center", color: "#666", fontSize: "13pt" } }, { children: caption }))] }));
    }
    if (!graphic) {
        var 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", __assign({ style: { width: "100%" } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: config_1.MAX_WIDTH, margin: "0 auto" } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ style: noGraphicTextStyle }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: { textAlign: "center" } }, { children: head })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { margin: "auto", maxWidth: wide ? "600px" : undefined } }, { children: children }))] })) })) })));
    }
    var 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);
    }
    var textCol = ((0, jsx_runtime_1.jsx)(antd_1.Col, __assign({ lg: wide ? 7 : 9, style: textColStyle }, { children: children }), "text"));
    var graphicCol = ((0, jsx_runtime_1.jsx)(antd_1.Col, __assign({ lg: wide ? 17 : 15, style: { padding: "0 30px", width: "100%" } }, { children: graphic }), "graphics"));
    var cols = swapCols ? [textCol, graphicCol] : [graphicCol, textCol];
    return ((0, jsx_runtime_1.jsx)("div", __assign({ 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) {
    var e_1, _a;
    var v = [];
    try {
        for (var video_1 = __values(video), video_1_1 = video_1.next(); !video_1_1.done; video_1_1 = video_1.next()) {
            var x = video_1_1.value;
            v.push((0, jsx_runtime_1.jsx)("source", { src: (0, util_1.MediaURL)(x) }, x));
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (video_1_1 && !video_1_1.done && (_a = video_1.return)) _a.call(video_1);
        }
        finally { if (e_1) throw e_1.error; }
    }
    return v;
}
function verifyHasMp4(video) {
    var e_2, _a;
    try {
        for (var video_2 = __values(video), video_2_1 = video_2.next(); !video_2_1.done; video_2_1 = video_2.next()) {
            var x = video_2_1.value;
            if (x.endsWith(".mp4")) {
                return;
            }
        }
    }
    catch (e_2_1) { e_2 = { error: e_2_1 }; }
    finally {
        try {
            if (video_2_1 && !video_2_1.done && (_a = video_2.return)) _a.call(video_2);
        }
        finally { if (e_2) throw e_2.error; }
    }
    console.warn("include mp4 format for the video, so that it is viewable on iOS!!", video);
}
Info.Heading = function (_a) {
    var children = _a.children, description = _a.description, style = _a.style;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign({ textAlign: "center", margin: "40px" }, style) }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ style: {
                    fontSize: "400%",
                    color: "#444",
                } }, { children: children })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { fontSize: "13pt", color: "#666" } }, { children: description }))] })));
};
//# sourceMappingURL=info.js.map