import * as React from 'react';
import { editor } from 'monaco-editor';
import styled from '@emotion/styled';
import { useEffect, useRef } from 'react';
import { DARK_THEME } from '../theme/theme-utils';
import * as monaco from 'monaco-editor';
import _ from 'lodash';
export const MonacoEditorWidget = (props) => {
    const ref = useRef(null);
    useEffect(() => {
        var _a;
        const editorRef = editor.create(ref.current, Object.assign(Object.assign({}, props.options), { model: props.model, value: null, theme: DARK_THEME }));
        (_a = props.editorDidMount) === null || _a === void 0 ? void 0 : _a.call(props, editorRef);
        _.defer(() => {
            monaco.editor.setTheme(DARK_THEME);
        });
        return () => {
            editorRef.dispose();
        };
    }, []);
    return React.createElement(S.Container, { className: props.className, ref: ref });
};
var S;
(function (S) {
    S.Container = styled.div `
    width: 100%;
    height: 100%;

    .monaco-editor {
      outline: none;
    }
  `;
})(S || (S = {}));
//# sourceMappingURL=MonacoEditorWidget.js.map