"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 __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 useConstCallback_1 = require("powerhooks/useConstCallback");
var CopyAll_1 = __importDefault(require("@mui/icons-material/CopyAll"));
var theme_2 = require("./theme");
var colors = {
    "tomatoRed": "#f85b52",
    "goldenRoad": "#e1bb2a",
    "limeGreen": "#54bd2b",
    "darkslategray": "#232323",
};
exports.GlCodeBlock = (0, react_1.memo)(function (props) {
    var className = props.className, language = props.language, showLineNumbers = props.showLineNumbers, text = props.text, hasDecorativeVsCodeButtons = props.hasDecorativeVsCodeButtons, hasShadow = props.hasShadow, isCopyBlock = props.isCopyBlock, copiedToClipboardMessage = props.copiedToClipboardMessage;
    var _a = __read((0, react_1.useState)(false), 2), isMouseDown = _a[0], setIsMouseDown = _a[1];
    var _b = __read((0, react_1.useState)(false), 2), isCopiedMessageShowing = _b[0], setIsCopiedMessageShowing = _b[1];
    var copyCode = (0, useConstCallback_1.useConstCallback)(function () {
        if (text === undefined) {
            return;
        }
        navigator.clipboard.writeText(text);
        setIsMouseDown(false);
        if (isCopiedMessageShowing) {
            return;
        }
        setIsCopiedMessageShowing(true);
        setTimeout(function () {
            setIsCopiedMessageShowing(false);
        }, 2000);
    });
    var onMouseDown = (0, useConstCallback_1.useConstCallback)(function () {
        if (isMouseDown) {
            return;
        }
        setIsMouseDown(true);
    });
    var _c = useStyles({
        "hasDecorativeVsCodeButtons": hasDecorativeVsCodeButtons !== null && hasDecorativeVsCodeButtons !== void 0 ? hasDecorativeVsCodeButtons : false,
        "hasShadow": hasShadow !== null && hasShadow !== void 0 ? hasShadow : true,
        isMouseDown: isMouseDown,
        isCopiedMessageShowing: isCopiedMessageShowing,
    }, { props: props }), classes = _c.classes, cx = _c.cx;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.heading }, { children: [hasDecorativeVsCodeButtons !== undefined &&
                        hasDecorativeVsCodeButtons && ((0, jsx_runtime_1.jsx)(VsCodeButtons, { className: classes.vsCodeButtons })), isCopyBlock !== undefined && isCopyBlock && ((0, jsx_runtime_1.jsx)("div", __assign({ className: classes.copyButtonWrapper, onMouseUp: copyCode, onMouseDown: onMouseDown }, { children: (0, jsx_runtime_1.jsx)(CopyAll_1.default, { className: classes.copyButtonIcon }) })))] })), (0, jsx_runtime_1.jsx)(react_code_blocks_1.CodeBlock, { language: language, showLineNumbers: showLineNumbers, text: text, theme: react_code_blocks_1.railscast }), (0, jsx_runtime_1.jsx)(theme_2.Text, __assign({ className: classes.copiedTextMessage, typo: "caption" }, { children: copiedToClipboardMessage !== undefined
                    ? copiedToClipboardMessage
                    : "Copied to clipboard" }))] })));
});
var useStyles = (0, theme_1.makeStyles)()(function (theme, _a) {
    var hasDecorativeVsCodeButtons = _a.hasDecorativeVsCodeButtons, hasShadow = _a.hasShadow, isMouseDown = _a.isMouseDown, isCopiedMessageShowing = _a.isCopiedMessageShowing;
    return ({
        "root": __assign(__assign({}, (hasDecorativeVsCodeButtons
            ? {
                "backgroundColor": colors.darkslategray,
            }
            : {})), { "boxShadow": !hasShadow ? undefined : theme.customShadow }),
        "heading": {
            "display": "flex",
            "justifyContent": "space-between",
        },
        "vsCodeButtons": {},
        "copyButtonWrapper": __assign({ "cursor": "pointer" }, (function () {
            var value = theme.spacing(1);
            return {
                "paddingTop": value,
                "paddingRight": value,
            };
        })()),
        "copyButtonIcon": {
            "fill": isMouseDown
                ? theme.colors.palette.focus.light
                : theme.colors.palette.light.greyVariant1,
        },
        "copiedTextMessage": {
            "transition": "opacity 200ms",
            "opacity": isCopiedMessageShowing ? 1 : 0,
            "pointerEvents": "none",
            "paddingBottom": theme.spacing(1),
            "paddingRight": theme.spacing(2),
            "textAlign": "right",
        },
    });
});
var VsCodeButtons = (function () {
    var VsCodeButtons = (0, react_1.memo)(function (props) {
        var className = props.className;
        var _a = useStyles(), classes = _a.classes, cx = _a.cx, css = _a.css;
        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: cx(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: cx(classes.buttons) }, { children: [
                    colors.tomatoRed,
                    colors.goldenRoad,
                    colors.limeGreen,
                ].map(function (color) {
                    return ((0, jsx_runtime_1.jsx)("div", { className: cx(classes.icon, css({
                            "backgroundColor": color,
                        })) }, color));
                }) })) })));
    });
    var useStyles = (0, theme_1.makeStyles)({ "name": { GlCodeBlock: exports.GlCodeBlock } })(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