"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Code = void 0;
const react_1 = __importDefault(require("react"));
// TODO: use package when PR is merged. Peerdep for react 17 (not 18)
const ReactSimpleEditor_1 = __importDefault(require("./ReactSimpleEditor"));
const icons_1 = require("../../icons");
const prism_core_1 = require("prismjs/components/prism-core");
require("prismjs/components/prism-markup");
require("prismjs/components/prism-clike");
require("prismjs/components/prism-javascript");
require("prismjs/components/prism-typescript");
require("prismjs/components/prism-jsx");
require("prismjs/components/prism-jsx.min");
require("prismjs/components/prism-tsx.min");
require("prismjs/components/prism-json");
require("prismjs/components/prism-css");
require("./syntax.css");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const hooks_1 = require("../../hooks");
const Code = ({ value: valueProp, defaultValue: defaultValueProp = '', onChange: onChangeProp, style, header, color, copy, language = 'js', ...props }) => {
    const [value, setValue] = (0, hooks_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValueProp,
        onChange: onChangeProp,
    });
    //@ts-ignore
    const [copied, copyIt] = (0, hooks_1.useCopyToClipboard)(value ?? '');
    return (react_1.default.createElement(inlines_1.styled.div
    //  onFocus={() => console.log('WOOHOO')}
    , { 
        //  onFocus={() => console.log('WOOHOO')}
        style: {
            width: '100%',
            position: 'relative',
            maxWidth: '100%',
            borderRadius: 4,
            background: color ? (0, varsUtilities_1.color)('background', color, 'subtle') : null,
            overflow: 'hidden',
            ...style,
        } },
        header && (react_1.default.createElement("div", { style: {
                background: (0, varsUtilities_1.color)('background', color || 'default', 'muted'),
            } }, header)),
        react_1.default.createElement(ReactSimpleEditor_1.default
        //@ts-ignore
        , { 
            //@ts-ignore
            value: value, onValueChange: (v) => setValue(v), highlight: (code) => {
                try {
                    // @ts-ignore
                    const h = (0, prism_core_1.highlight)(code, prism_core_1.languages[language]);
                    return h;
                }
                catch (err) { }
            }, style: {
                pointerEvents: !setValue ? 'none' : 'auto',
                margin: 16,
                fontSize: 14,
                color: (0, varsUtilities_1.color)('content', 'brand', 'primary'),
                fontFamily: 'Fira Code, monospace, sans-serif',
                outline: 'none !important',
            }, ...props }),
        copy ? (react_1.default.createElement(icons_1.IconCopy, { color: "brand", onClick: () => copyIt(), style: {
                position: 'absolute',
                top: 16,
                right: 16,
            } })) : null));
};
exports.Code = Code;
//# sourceMappingURL=index.js.map