"use strict";

var _style = require("styled-jsx/style");

var _style2 = _interopRequireDefault(_style);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var __extends = undefined && undefined.__extends || function () {
    var extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function (d, b) {
        d.__proto__ = b;
    } || function (d, b) {
        for (var p in b) {
            if (b.hasOwnProperty(p)) d[p] = b[p];
        }
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() {
            this.constructor = d;
        }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
}();
var __makeTemplateObject = undefined && undefined.__makeTemplateObject || function (cooked, raw) {
    if (Object.defineProperty) {
        Object.defineProperty(cooked, "raw", { value: raw });
    } else {
        cooked.raw = raw;
    }
    return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDOM = require("react-dom");
var graphql_1 = require("graphql");
var cn = require("classnames");
var ExecuteButton_1 = require("./ExecuteButton");
var QueryEditor_1 = require("./QueryEditor");
var CodeMirrorSizer_1 = require("graphiql/dist/utility/CodeMirrorSizer");
var fillLeafs_1 = require("graphiql/dist/utility/fillLeafs");
var elementPosition_1 = require("graphiql/dist/utility/elementPosition");
var react_redux_1 = require("react-redux");
var Spinner_1 = require("../Spinner");
var Results_1 = require("./Results");
var ResponseTracing_1 = require("./ResponseTracing");
var withTheme_1 = require("../Theme/withTheme");
var GraphDocs_1 = require("./DocExplorer/GraphDocs");
var index_1 = require("../../styled/index");
var TopBar_1 = require("./TopBar/TopBar");
var VariableEditor_1 = require("./VariableEditor");
var reselect_1 = require("reselect");
var selectors_1 = require("../../state/sessions/selectors");
var actions_1 = require("../../state/sessions/actions");
var GraphQLEditor = /** @class */function (_super) {
    __extends(GraphQLEditor, _super);
    function GraphQLEditor() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.setQueryVariablesRef = function (ref) {
            _this.queryVariablesRef = ref;
        };
        _this.setHttpHeadersRef = function (ref) {
            _this.httpHeadersRef = ref;
        };
        _this.setQueryResizer = function (ref) {
            _this.queryResizer = ReactDOM.findDOMNode(ref);
        };
        _this.setResponseResizer = function (ref) {
            _this.responseResizer = ReactDOM.findDOMNode(ref);
        };
        _this.setEditorBarComponent = function (ref) {
            _this.editorBarComponent = ref;
        };
        _this.setQueryEditorComponent = function (ref) {
            _this.queryEditorComponent = ref;
        };
        _this.setVariableEditorComponent = function (ref) {
            _this.variableEditorComponent = ref;
        };
        _this.setResultComponent = function (ref) {
            _this.resultComponent = ref;
        };
        _this.setDocExplorerRef = function (ref) {
            if (ref) {
                _this.docExplorerComponent = ref.getWrappedInstance();
            }
        };
        _this.handleClickReference = function (reference) {
            //
        };
        _this.runQueryAtCursor = function () {
            if (_this.props.queryRunning) {
                _this.props.stopQuery(_this.props.sessionId);
                return;
            }
            var editor = _this.queryEditorComponent.getCodeMirror();
            if (editor.hasFocus()) {
                var cursor = editor.getCursor();
                var cursorIndex = editor.indexFromPos(cursor);
                _this.props.runQueryAtPosition(cursorIndex);
            }
        };
        _this.handleHintInformationRender = function (elem) {
            elem.addEventListener('click', _this.onClickHintInformation);
            var _onRemoveFn;
            elem.addEventListener('DOMNodeRemoved', _onRemoveFn = function onRemoveFn() {
                elem.removeEventListener('DOMNodeRemoved', _onRemoveFn);
                elem.removeEventListener('click', _this.onClickHintInformation);
            });
        };
        _this.handleResizeStart = function (downEvent) {
            if (!_this.didClickDragBar(downEvent)) {
                return;
            }
            downEvent.preventDefault();
            var offset = downEvent.clientX - elementPosition_1.getLeft(downEvent.target);
            var onMouseMove = function onMouseMove(moveEvent) {
                if (moveEvent.buttons === 0) {
                    return _onMouseUp();
                }
                var editorBar = ReactDOM.findDOMNode(_this.editorBarComponent);
                var leftSize = moveEvent.clientX - elementPosition_1.getLeft(editorBar) - offset;
                var rightSize = editorBar.clientWidth - leftSize;
                _this.props.setEditorFlex(leftSize / rightSize);
            };
            var _onMouseUp = function onMouseUp() {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', _onMouseUp);
                onMouseMove = null;
                _onMouseUp = null;
            };
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', _onMouseUp);
        };
        _this.handleTracingResizeStart = function (downEvent) {
            downEvent.preventDefault();
            var didMove = false;
            var hadHeight = _this.props.responseTracingHeight;
            var offset = downEvent.clientY - elementPosition_1.getTop(downEvent.target);
            var onMouseMove = function onMouseMove(moveEvent) {
                if (moveEvent.buttons === 0) {
                    return _onMouseUp2();
                }
                didMove = true;
                var editorBar = ReactDOM.findDOMNode(_this.editorBarComponent);
                var topSize = moveEvent.clientY - elementPosition_1.getTop(editorBar) - offset;
                var bottomSize = editorBar.clientHeight - topSize;
                if (bottomSize < 60) {
                    _this.props.closeTracing(hadHeight);
                } else {
                    _this.props.openTracing(hadHeight);
                }
            };
            var _onMouseUp2 = function onMouseUp() {
                if (!didMove) {
                    _this.props.toggleTracing();
                }
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', _onMouseUp2);
                onMouseMove = null;
                _onMouseUp2 = null;
            };
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', _onMouseUp2);
        };
        _this.handleVariableResizeStart = function (downEvent) {
            downEvent.preventDefault();
            var didMove = false;
            var wasOpen = _this.props.variableEditorOpen;
            var hadHeight = _this.props.variableEditorHeight;
            var offset = downEvent.clientY - elementPosition_1.getTop(downEvent.target);
            if (wasOpen && (downEvent.target === _this.queryVariablesRef || downEvent.target === _this.httpHeadersRef)) {
                return;
            }
            var onMouseMove = function onMouseMove(moveEvent) {
                if (moveEvent.buttons === 0) {
                    return _onMouseUp3();
                }
                didMove = true;
                var editorBar = ReactDOM.findDOMNode(_this.editorBarComponent);
                var topSize = moveEvent.clientY - elementPosition_1.getTop(editorBar) - offset;
                var bottomSize = editorBar.clientHeight - topSize;
                if (bottomSize < 60) {
                    _this.props.closeVariables(hadHeight);
                } else {
                    _this.props.openVariables(bottomSize);
                }
            };
            var _onMouseUp3 = function onMouseUp() {
                if (!didMove) {
                    _this.props.toggleVariables();
                }
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', _onMouseUp3);
                onMouseMove = null;
                _onMouseUp3 = null;
            };
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', _onMouseUp3);
        };
        _this.onClickHintInformation = function (event) {
            if (event.target.className === 'typeName') {
                var typeName = event.target.innerHTML;
                var schema = _this.props.schema;
                if (schema) {
                    // TODO: There is no way as of now to retrieve the NAMED_TYPE of a GraphQLList(Type).
                    // We're therefore removing any '[' or '!' characters, to properly find its NAMED_TYPE. (eg. [Type!]! => Type)
                    // This should be removed as soon as there's a safer way to do that.
                    var namedTypeName = typeName.replace(/[\]\[!]/g, '');
                    var type = schema.getType(namedTypeName);
                    if (graphql_1.isNamedType(type)) {
                        _this.docExplorerComponent.showDocFromType(type);
                    }
                }
            }
        };
        return _this;
    }
    GraphQLEditor.prototype.componentDidMount = function () {
        // Ensure a form of a schema exists (including `null`) and
        // if not, fetch one using an introspection query.
        this.props.fetchSchema();
        // Utility for keeping CodeMirror correctly sized.
        this.codeMirrorSizer = new CodeMirrorSizer_1.default();
        global.g = this;
    };
    GraphQLEditor.prototype.componentDidUpdate = function () {
        // If this update caused DOM nodes to have changed sizes, update the
        // corresponding CodeMirror instance sizes to match.
        // const components = [
        // this.queryEditorComponent,
        // this.variableEditorComponent,
        // this.resultComponent,
        // ]
        // this.codeMirrorSizer.updateSizes(components)
        if (this.resultComponent && Boolean(this.props.subscriptionActive)) {
            this.resultComponent.scrollTop = this.resultComponent.scrollHeight;
        }
    };
    GraphQLEditor.prototype.render = function () {
        return React.createElement(
            "div",
            { className: cn('graphiql-container'), "data-jsx": 2079117284
            },
            React.createElement(_style2.default, {
                styleId: 2895015825,
                css: ".graphiql-container[data-jsx=\"2079117284\"] {font-family: Open Sans, sans-serif;}.docs-button[data-jsx=\"2079117284\"],.schema-button[data-jsx=\"2079117284\"] {padding-bottom: 8px;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);left: -44px;top: 195px;}div.schema-button[data-jsx=\"2079117284\"] {left: -53px;top: 120px;}.queryWrap[data-jsx=\"2079117284\"] {border-top: 8px solid rgba(23, 42, 58, 1);}.queryWrap.light[data-jsx=\"2079117284\"] {border-top: 8px solid #eeeff0;}.graphiql-button[data-jsx=\"2079117284\"] {padding: 5px 9px 6px 9px;letter-spacing: 0.53px;}.graphiql-button.prettify[data-jsx=\"2079117284\"] {top: -57px;right: 38px;z-index: 2;}.intro[data-jsx=\"2079117284\"] {font-family: 'Source Code Pro', 'Consolas', 'Inconsolata',              'Droid Sans Mono', 'Monaco', monospace;letter-spacing: 0.6px;width: 235px;}.listening[data-jsx=\"2079117284\"] {font-family: 'Source Code Pro', 'Consolas', 'Inconsolata',              'Droid Sans Mono', 'Monaco', monospace;letter-spacing: 0.6px;padding-left: 24px;padding-bottom: 60px;}.onboarding-hint.step1[data-jsx=\"2079117284\"] {top: 207px;left: 90px;}.onboarding-hint.step2[data-jsx=\"2079117284\"] {top: 207px;left: 90px;}.absolute,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button.prettify[data-jsx=\"2079117284\"],\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {position: absolute;}.white,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"] {color: #fff;}.bgGreen,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"] {background-color: #27ae60;}.pa6,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"] {padding: 6px;}.br2,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {border-radius: 2px;}.z2,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"] {z-index: 2;}.ttu,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {text-transform: uppercase;}.fw6,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {font-weight: 600;}.f14,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {font-size: 14px;}.ph10,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"] {padding-left: 10px;padding-right: 10px;}.pointer:hover,\n.docs-button[data-jsx=\"2079117284\"]:hover,\n.schema-button[data-jsx=\"2079117284\"]:hover,\n.graphiql-button[data-jsx=\"2079117284\"]:hover {cursor: pointer;}.bgLightOrange,\ndiv.schema-button[data-jsx=\"2079117284\"] {background-color: #f18f01;}.relative,\n.queryWrap[data-jsx=\"2079117284\"] {position: relative;}.white50,\n.graphiql-button[data-jsx=\"2079117284\"] {color: hsla(0,0%,100%,.5);}.bgDarkBlue,\n.graphiql-button[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"] {background-color: #172a3a;}.ttu,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {text-transform: uppercase;}.f14,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {font-size: 14px;}.fw6,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"] {font-weight: 600;}.br2,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {border-radius: 2px;}.pointer:hover,\n.docs-button[data-jsx=\"2079117284\"]:hover,\n.schema-button[data-jsx=\"2079117284\"]:hover,\n.graphiql-button[data-jsx=\"2079117284\"]:hover {cursor: pointer;}.absolute,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button.prettify[data-jsx=\"2079117284\"],\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {position: absolute;}.absolute,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button.prettify[data-jsx=\"2079117284\"],\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {position: absolute;}.tlCenter,\n.intro[data-jsx=\"2079117284\"] {transform: translate(-50%,-50%);}.top50,\n.intro[data-jsx=\"2079117284\"] {top: 50%;}.left50,\n.intro[data-jsx=\"2079117284\"] {left: 50%;}.white20,\n.intro[data-jsx=\"2079117284\"] {color: hsla(0,0%,100%,.2);}.f16,\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"] {font-size: 16px;}.tc,\n.intro[data-jsx=\"2079117284\"] {text-align: center;}.f16,\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"] {font-size: 16px;}.white40,\n.listening[data-jsx=\"2079117284\"] {color: hsla(0,0%,100%,.4);}.absolute,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button.prettify[data-jsx=\"2079117284\"],\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {position: absolute;}.bottom0,\n.listening[data-jsx=\"2079117284\"] {bottom: 0;}.bgDarkBlue,\n.graphiql-button[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"] {background-color: #172a3a;}.absolute,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button.prettify[data-jsx=\"2079117284\"],\n.intro[data-jsx=\"2079117284\"],\n.listening[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {position: absolute;}.br2,\n.docs-button[data-jsx=\"2079117284\"],\n.schema-button[data-jsx=\"2079117284\"],\n.graphiql-button[data-jsx=\"2079117284\"],\n.onboarding-hint[data-jsx=\"2079117284\"] {border-radius: 2px;}.z999,\n.onboarding-hint[data-jsx=\"2079117284\"] {z-index: 999;}"
            }),
            React.createElement(_style2.default, {
                styleId: 1032694800,
                css: "\n          .query-header-enter {\n            opacity: 0.01;\n          }\n\n          .query-header-enter.query-header-enter-active {\n            opacity: 1;\n            transition: opacity 500ms ease-in;\n          }\n\n          .query-header-leave {\n            opacity: 1;\n          }\n\n          .query-header-leave.query-header-leave-active {\n            opacity: 0.01;\n            transition: opacity 300ms ease-in;\n          }\n        "
            }),
            React.createElement(
                "div",
                { className: "editorWrap", "data-jsx": 2079117284
                },
                React.createElement(TopBar_1.default, null),
                React.createElement(
                    "div",
                    { ref: this.setEditorBarComponent, className: "editorBar", onMouseDown: this.handleResizeStart, "data-jsx": 2079117284
                    },
                    React.createElement(
                        "div",
                        { className: cn('queryWrap', this.props.localTheme), style: {
                                WebkitFlex: this.props.editorFlex,
                                flex: this.props.editorFlex
                            }, "data-jsx": 2079117284
                        },
                        React.createElement(QueryEditor_1.default, { getRef: this.setQueryEditorComponent, schema: this.props.schema, onHintInformationRender: this.handleHintInformationRender, onRunQuery: this.runQueryAtCursor, onClickReference: this.handleClickReference }),
                        React.createElement(
                            "div",
                            { className: "variable-editor", style: {
                                    height: this.props.variableEditorOpen ? this.props.variableEditorHeight : null
                                }, "data-jsx": 2079117284
                            },
                            React.createElement(
                                "div",
                                { className: "variable-editor-title", style: {
                                        cursor: this.props.variableEditorOpen ? 'row-resize' : 'n-resize'
                                    }, onMouseDown: this.handleVariableResizeStart, "data-jsx": 2079117284
                                },
                                React.createElement(
                                    "span",
                                    { className: cn('subtitle', {
                                            active: this.props.queryVariablesActive
                                        }), ref: this.setQueryVariablesRef, onClick: this.props.openQueryVariables, "data-jsx": 2079117284
                                    },
                                    'Query Variables'
                                ),
                                React.createElement(
                                    "span",
                                    { className: cn('subtitle', {
                                            active: !this.props.queryVariablesActive
                                        }), ref: this.setHttpHeadersRef, onClick: this.props.closeQueryVariables, "data-jsx": 2079117284
                                    },
                                    'HTTP Headers ' + (this.props.headersCount && this.props.headersCount > 0 ? this.props.headersCount : '')
                                )
                            ),
                            this.props.queryVariablesActive ? React.createElement(VariableEditor_1.VariableEditorComponent, { getRef: this.setVariableEditorComponent, onHintInformationRender: this.props.queryVariablesActive ? this.handleHintInformationRender : undefined, onRunQuery: this.runQueryAtCursor }) : React.createElement(VariableEditor_1.HeadersEditorComponent, { getRef: this.setVariableEditorComponent, onHintInformationRender: this.props.queryVariablesActive ? this.handleHintInformationRender : undefined, onRunQuery: this.runQueryAtCursor })
                        ),
                        React.createElement(QueryDragBar, { ref: this.setQueryResizer })
                    ),
                    React.createElement(
                        "div",
                        { className: "resultWrap", "data-jsx": 2079117284
                        },
                        React.createElement(ResultDragBar, { ref: this.setResponseResizer }),
                        React.createElement(ExecuteButton_1.default, null),
                        this.props.queryRunning && this.props.responses.size === 0 && React.createElement(Spinner_1.default, null),
                        React.createElement(Results_1.default, { setRef: this.setResultComponent }),
                        !this.props.queryRunning && (!this.props.responses || this.props.responses.size === 0) && React.createElement(
                            "div",
                            { className: "intro", "data-jsx": 2079117284
                            },
                            "Hit the Play Button to get a response here"
                        ),
                        this.props.subscriptionActive && React.createElement(
                            "div",
                            { className: "listening", "data-jsx": 2079117284
                            },
                            "Listening \u2026"
                        ),
                        React.createElement(
                            "div",
                            { className: "response-tracing", style: {
                                    height: this.props.responseTracingOpen ? this.props.responseTracingHeight : null
                                }, "data-jsx": 2079117284
                            },
                            React.createElement(
                                "div",
                                { className: "response-tracing-title", style: {
                                        cursor: this.props.responseTracingOpen ? 'row-resize' : 'n-resize'
                                    }, onMouseDown: this.handleTracingResizeStart, "data-jsx": 2079117284
                                },
                                "Tracing"
                            ),
                            React.createElement(ResponseTracing_1.default, null)
                        )
                    )
                )
            ),
            React.createElement(GraphDocs_1.default, { ref: this.setDocExplorerRef, schema: this.props.schema })
        );
    };
    /**
     * Inspect the query, automatically filling in selection sets for non-leaf
     * fields which do not yet have them.
     *
     * @public
     */
    GraphQLEditor.prototype.autoCompleteLeafs = function () {
        var _a = fillLeafs_1.fillLeafs(this.props.schema, this.props.query),
            insertions = _a.insertions,
            result = _a.result;
        if (insertions && insertions.length > 0) {
            var editor_1 = this.queryEditorComponent.getCodeMirror();
            editor_1.operation(function () {
                var cursor = editor_1.getCursor();
                var cursorIndex = editor_1.indexFromPos(cursor);
                editor_1.setValue(result);
                var added = 0;
                try {
                    /* tslint:disable-next-line */
                    var markers_1 = insertions.map(function (_a) {
                        var index = _a.index,
                            string = _a.string;
                        return editor_1.markText(editor_1.posFromIndex(index + added), editor_1.posFromIndex(index + (added += string.length)), {
                            className: 'autoInsertedLeaf',
                            clearOnEnter: true,
                            title: 'Automatically added leaf fields'
                        });
                    });
                    setTimeout(function () {
                        return markers_1.forEach(function (marker) {
                            return marker.clear();
                        });
                    }, 7000);
                } catch (e) {
                    //
                }
                var newCursorIndex = cursorIndex;
                /* tslint:disable-next-line */
                insertions.forEach(function (_a) {
                    var index = _a.index,
                        string = _a.string;
                    if (index < cursorIndex && string) {
                        newCursorIndex += string.length;
                    }
                });
                editor_1.setCursor(editor_1.posFromIndex(newCursorIndex));
            });
        }
        return result;
    };
    GraphQLEditor.prototype.didClickDragBar = function (event) {
        // Only for primary unmodified clicks
        return event.target === this.queryResizer || event.target === this.responseResizer;
    };
    return GraphQLEditor;
}(React.PureComponent);
var mapStateToProps = reselect_1.createStructuredSelector({
    queryRunning: selectors_1.getQueryRunning,
    responses: selectors_1.getResponses,
    subscriptionActive: selectors_1.getSubscriptionActive,
    variableEditorOpen: selectors_1.getVariableEditorOpen,
    variableEditorHeight: selectors_1.getVariableEditorHeight,
    responseTracingOpen: selectors_1.getResponseTracingOpen,
    responseTracingHeight: selectors_1.getResponseTracingHeight,
    responseExtensions: selectors_1.getResponseExtensions,
    currentQueryStartTime: selectors_1.getCurrentQueryStartTime,
    currentQueryEndTime: selectors_1.getCurrentQueryEndTime,
    tracingSupported: selectors_1.getTracingSupported,
    editorFlex: selectors_1.getEditorFlex,
    queryVariablesActive: selectors_1.getQueryVariablesActive,
    headers: selectors_1.getHeaders,
    operations: selectors_1.getOperations,
    operationName: selectors_1.getOperationName,
    headersCount: selectors_1.getHeadersCount,
    sessionId: selectors_1.getSelectedSessionIdFromRoot
});
exports.default = withTheme_1.default(
// TODO fix redux types
react_redux_1.connect(mapStateToProps, {
    updateQueryFacts: actions_1.updateQueryFacts,
    stopQuery: actions_1.stopQuery,
    runQueryAtPosition: actions_1.runQueryAtPosition,
    openQueryVariables: actions_1.openQueryVariables,
    closeQueryVariables: actions_1.closeQueryVariables,
    openVariables: actions_1.openVariables,
    closeVariables: actions_1.closeVariables,
    openTracing: actions_1.openTracing,
    closeTracing: actions_1.closeTracing,
    toggleTracing: actions_1.toggleTracing,
    setEditorFlex: actions_1.setEditorFlex,
    toggleVariables: actions_1.toggleVariables,
    fetchSchema: actions_1.fetchSchema
}, null, {
    withRef: true
})(GraphQLEditor));
var DragBar = index_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 15px;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n"], ["\n  width: 15px;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n"])));
var QueryDragBar = index_1.styled(DragBar)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  right: 0px;\n"], ["\n  right: 0px;\n"])));
var ResultDragBar = index_1.styled(DragBar)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: 0px;\n  z-index: 1;\n"], ["\n  left: 0px;\n  z-index: 1;\n"])));
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=GraphQLEditor.jsx.map