import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { MonacoDiffEditor } from 'react-monaco-editor';
import { styled } from '@journeyapps-labs/reactor-mod';
import { themed } from '../theme-reactor/editor-theme-fragment';
import { DARK_THEME } from '../theme/theme-utils';
import _ from 'lodash';
export const DualEditorWidget = (props) => {
    var _a, _b;
    const [listener, setListener] = useState();
    const leftRef = useRef(null);
    const ref = React.useRef(null);
    const [compactMode, setCompactMode] = useState(false);
    useEffect(() => {
        return () => {
            listener === null || listener === void 0 ? void 0 : listener.dispose();
        };
    }, []);
    return (React.createElement(S.Container, null,
        !compactMode ? (React.createElement(S.Header, null,
            React.createElement(S.Part, { ref: leftRef }, (_a = props.getLeftHeaderContent) === null || _a === void 0 ? void 0 : _a.call(props)),
            React.createElement(S.Part2, null, (_b = props.getRightHeaderContent) === null || _b === void 0 ? void 0 : _b.call(props)))) : null,
        React.createElement(S.EditorContainer, { ref: ref },
            React.createElement(MonacoDiffEditor, Object.assign({}, props, { options: Object.assign(Object.assign({}, props.options), { renderSideBySide: true, automaticLayout: true }), theme: DARK_THEME, editorDidMount: (editor, monaco) => {
                    var _a;
                    (_a = props.editorDidMount) === null || _a === void 0 ? void 0 : _a.call(props, editor, monaco);
                    _.defer(() => {
                        monaco.editor.setTheme(DARK_THEME);
                    });
                    const doLayout = () => {
                        const info = editor.getOriginalEditor().getLayoutInfo();
                        // this is the only way i can see to detect if it's changed to an inline mode
                        setCompactMode(info.viewportColumn === 1);
                        if (!leftRef.current) {
                            return;
                        }
                        leftRef.current.style.width = `${info.width}px`;
                    };
                    const dispose1 = editor.getOriginalEditor().onDidLayoutChange((e) => {
                        doLayout();
                    });
                    doLayout();
                    setListener(dispose1);
                } })))));
};
var S;
(function (S) {
    S.EditorContainer = themed.div `
    position: relative;
    flex-grow: 1;
    overflow: hidden;
  `;
    S.Container = themed.div `
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;

    .monaco-editor {
      outline: none;
    }
  `;
    S.Header = styled.div `
    display: flex;
    align-items: center;
    flex-grow: 0;
    color: ${(p) => p.theme.panels.titleBackground};
  `;
    S.Part = styled.div `
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-right: solid 2px ${(p) => p.theme.panels.divider};

    &:last-of-type {
      border-right: 0;
    }
  `;
    S.Part2 = styled(S.Part) `
    flex-grow: 1;
  `;
})(S || (S = {}));
//# sourceMappingURL=DualEditorWidget.js.map