"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MarkdownInput = void 0;
const react_1 = __importDefault(require("react"));
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const inlines_1 = require("inlines");
const hooks_1 = require("../../hooks");
const ReactSimpleEditor_1 = __importDefault(require("../Code/ReactSimpleEditor"));
const prism_core_1 = require("prismjs/components/prism-core");
require("prismjs/components/prism-markdown");
require("prismjs/components/prism-javascript");
const StyledMarkdownInput = (0, inlines_1.styled)('div', {
    border: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'subtle')}`,
    borderRadius: 4,
});
const MarkdownInput = ({ value, onChange, disabled, }) => {
    const [code, setCode] = (0, hooks_1.usePropState)(value);
    // useEffect(() => {
    //   e.stopPropagation()
    //   e.preventDefault()
    // })
    return (react_1.default.createElement(StyledMarkdownInput, null,
        react_1.default.createElement(inlines_1.styled.div, { className: "markdown", style: {
                backgroundColor: (0, varsUtilities_1.color)('background', 'default', 'surface'),
                borderRadius: 4,
                padding: 12,
            } },
            react_1.default.createElement(Text_1.Text, { color: "default" }, "Markdown Editor")),
        react_1.default.createElement(inlines_1.styled.div, { style: { padding: 12, pointerEvents: disabled ? 'none' : null } },
            react_1.default.createElement(ReactSimpleEditor_1.default, { value: code, onValueChange: (code) => {
                    setCode(code);
                    // onChange(code)
                    onChange?.({ target: { value: code } });
                }, highlight: (tempCode) => {
                    try {
                        const h = (0, prism_core_1.highlight)(tempCode, prism_core_1.languages.markdown);
                        return h;
                    }
                    catch (err) {
                        console.error(err);
                    }
                }, style: {
                    fontSize: 14,
                    color: (0, varsUtilities_1.color)('content', 'brand', 'primary'),
                    fontFamily: 'Fira Code, monospace, sans-serif',
                } }))));
};
exports.MarkdownInput = MarkdownInput;
//# sourceMappingURL=MarkdownInput.js.map