"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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlCodeBlock = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_code_blocks_1 = require("react-code-blocks");
var react_1 = require("react");
var theme_1 = require("./theme");
var colors = {
    "tomatoRed": "#f85b52",
    "goldenRoad": "#e1bb2a",
    "limeGreen": "#54bd2b",
    "darkslategray": "#232323",
};
exports.GlCodeBlock = react_1.memo(function (props) {
    var className = props.className, language = props.language, showLineNumbers = props.showLineNumbers, text = props.text, hasDecorativeVsCodeButtons = props.hasDecorativeVsCodeButtons, hasShadow = props.hasShadow;
    var _a = useStyles({
        "hasDecorativeVsCodeButtons": hasDecorativeVsCodeButtons !== null && hasDecorativeVsCodeButtons !== void 0 ? hasDecorativeVsCodeButtons : false,
        "hasShadow": hasShadow !== null && hasShadow !== void 0 ? hasShadow : false,
    }), classes = _a.classes, cx = _a.cx;
    return (jsx_runtime_1.jsxs("div", __assign({ className: cx(classes.root, className) }, { children: [hasDecorativeVsCodeButtons !== undefined &&
                hasDecorativeVsCodeButtons && (jsx_runtime_1.jsx(VsCodeButtons, { className: classes.vsCodeButtons }, void 0)),
            jsx_runtime_1.jsx(react_code_blocks_1.CodeBlock, { language: language, showLineNumbers: showLineNumbers, text: text, theme: react_code_blocks_1.railscast }, void 0)] }), void 0));
});
var useStyles = theme_1.makeStyles()(function (theme, _a) {
    var hasDecorativeVsCodeButtons = _a.hasDecorativeVsCodeButtons, hasShadow = _a.hasShadow;
    return ({
        "root": __assign(__assign({}, (hasDecorativeVsCodeButtons
            ? {
                "position": "relative",
                "paddingTop": 24,
                "backgroundColor": colors.darkslategray,
            }
            : {})), { "boxShadow": !hasShadow ? undefined : theme.customShadow }),
        "vsCodeButtons": {
            "position": "absolute",
            "top": 0,
            "left": 0,
        },
    });
});
var VsCodeButtons = (function () {
    var VsCodeButtons = react_1.memo(function (props) {
        var className = props.className;
        var _a = useStyles(), classes = _a.classes, cx = _a.cx, css = _a.css;
        return (jsx_runtime_1.jsx("div", __assign({ className: cx(classes.root, className) }, { children: jsx_runtime_1.jsx("div", __assign({ className: cx(classes.buttons) }, { children: [
                    colors.tomatoRed,
                    colors.goldenRoad,
                    colors.limeGreen,
                ].map(function (color) {
                    return (jsx_runtime_1.jsx("div", { className: cx(classes.icon, css({
                            "backgroundColor": color,
                        })) }, color));
                }) }), void 0) }), void 0));
    });
    var useStyles = theme_1.makeStyles()(function (theme) { return ({
        "root": {
            "width": "100%",
            "height": 24,
        },
        "buttons": __assign({ "display": "flex", "gap": theme.spacing(1) }, (function () {
            var value = theme.spacing(2);
            return {
                "marginTop": value,
                "marginLeft": value,
            };
        })()),
        "icon": __assign(__assign({}, (function () {
            var value = 14;
            return {
                "width": value,
                "height": value,
            };
        })()), { "borderRadius": "50%" }),
    }); });
    return { VsCodeButtons: VsCodeButtons };
})().VsCodeButtons;
//# sourceMappingURL=GlCodeBlock.js.map