"use strict";

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;
};
var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var index_1 = require("../../../styled/index");
var theme = require("styled-theming");
var polished_1 = require("polished");
var copy = require("copy-to-clipboard");
var Share_1 = require("../../Share");
var ReloadIcon_1 = require("./ReloadIcon");
var styled_components_1 = require("styled-components");
var cx = require("classnames");
var reselect_1 = require("reselect");
var selectors_1 = require("../../../state/sessions/selectors");
var react_redux_1 = require("react-redux");
var selectors_2 = require("../../../state/general/selectors");
var PropTypes = require("prop-types");
var actions_1 = require("../../../state/sessions/actions");
var actions_2 = require("../../../state/sharing/actions");
var actions_3 = require("../../../state/general/actions");
var TopBar = /** @class */function (_super) {
    __extends(TopBar, _super);
    function TopBar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.copyCurlToClipboard = function () {
            var curl = _this.getCurl();
            copy(curl);
        };
        _this.onChange = function (e) {
            _this.props.editEndpoint(e.target.value);
        };
        _this.onKeyDown = function (e) {
            if (e.keyCode === 13) {
                _this.fetchSchema();
            }
        };
        _this.fetchSchema = function () {
            _this.props.fetchSchema();
        };
        _this.openHistory = function () {
            _this.props.openHistory();
        };
        _this.getCurl = function () {
            // no need to rerender the whole time. only on-demand the store is fetched
            var session = selectors_1.getSelectedSession(_this.context.store.getState());
            var variables;
            try {
                variables = JSON.parse(session.variables);
            } catch (e) {
                //
            }
            var data = JSON.stringify({
                query: session.query,
                variables: variables,
                operationName: session.operationName
            });
            var sessionHeaders;
            try {
                sessionHeaders = JSON.parse(session.headers);
            } catch (e) {
                //
            }
            var headers = __assign({ 'Accept-Encoding': 'gzip, deflate, br', 'Content-Type': 'application/json', Accept: 'application/json', Connection: 'keep-alive', DNT: '1', Origin: location.origin || session.endpoint }, sessionHeaders);
            var headersString = Object.keys(headers).map(function (key) {
                var value = headers[key];
                return "-H '" + key + ": " + value + "'";
            }).join(' ');
            return "curl '" + session.endpoint + "' " + headersString + " --data-binary '" + data + "' --compressed";
        };
        return _this;
    }
    TopBar.prototype.render = function () {
        var endpointUnreachable = this.props.endpointUnreachable;
        return React.createElement(
            TopBarWrapper,
            null,
            React.createElement(
                exports.Button,
                { onClick: this.props.prettifyQuery },
                "Prettify"
            ),
            React.createElement(
                exports.Button,
                { onClick: this.openHistory },
                "History"
            ),
            React.createElement(
                UrlBarWrapper,
                null,
                React.createElement(UrlBar, { value: this.props.endpoint, onChange: this.onChange, onKeyDown: this.onKeyDown, onBlur: this.fetchSchema, disabled: this.props.fixedEndpoint, className: cx({ active: !this.props.fixedEndpoint }) }),
                endpointUnreachable ? React.createElement(
                    ReachError,
                    null,
                    React.createElement(
                        "span",
                        null,
                        "Server cannot be reached"
                    ),
                    React.createElement(Spinner, null)
                ) : React.createElement(ReloadIcon_1.default, { isReloadingSchema: this.props.isReloadingSchema, onReloadSchema: this.fetchSchema })
            ),
            React.createElement(
                exports.Button,
                { onClick: this.copyCurlToClipboard },
                "Copy CURL"
            ),
            React.createElement(
                Share_1.default,
                null,
                React.createElement(
                    exports.Button,
                    null,
                    "Share Playground"
                )
            )
        );
    };
    TopBar.contextTypes = {
        store: PropTypes.shape({
            subscribe: PropTypes.func.isRequired,
            dispatch: PropTypes.func.isRequired,
            getState: PropTypes.func.isRequired
        })
    };
    return TopBar;
}(React.Component);
var mapStateToProps = reselect_1.createStructuredSelector({
    endpoint: selectors_1.getEndpoint,
    fixedEndpoint: selectors_2.getFixedEndpoint,
    isReloadingSchema: selectors_1.getIsReloadingSchema,
    endpointUnreachable: selectors_1.getEndpointUnreachable
});
exports.default = react_redux_1.connect(mapStateToProps, {
    editEndpoint: actions_1.editEndpoint,
    prettifyQuery: actions_1.prettifyQuery,
    openHistory: actions_3.openHistory,
    share: actions_2.share,
    fetchSchema: actions_1.fetchSchema
})(TopBar);
var buttonColor = theme('mode', {
    light: function light(p) {
        return p.theme.colours.darkBlue10;
    },
    dark: function dark(p) {
        return p.theme.colours.darkerBlue;
    }
});
var buttonHoverColor = theme('mode', {
    light: function light(p) {
        return polished_1.darken(0.02, p.theme.colours.darkBlue20);
    },
    dark: function dark(p) {
        return polished_1.lighten(0.02, p.theme.colours.darkerBlue);
    }
});
var backgroundColor = theme('mode', {
    light: function light(p) {
        return '#eeeff0';
    },
    dark: function dark(p) {
        return p.theme.colours.darkBlue;
    }
});
var inactiveFontColor = theme('mode', {
    light: function light(p) {
        return p.theme.colours.darkBlue30;
    },
    dark: function dark(p) {
        return p.theme.colours.white30;
    }
});
var fontColor = theme('mode', {
    light: function light(p) {
        return p.theme.colours.darkBlue60;
    },
    dark: function dark(p) {
        return p.theme.colours.white60;
    }
});
var barBorder = theme('mode', {
    light: function light(p) {
        return p.theme.colours.darkBlue20;
    },
    dark: function dark(p) {
        return '#09141c';
    }
});
var spinnerColor = theme('mode', {
    light: function light(p) {
        return p.theme.colours.black40;
    },
    dark: function dark(p) {
        return p.theme.colours.white30;
    }
});
exports.Button = index_1.styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-transform: uppercase;\n  font-weight: 600;\n  color: ", ";\n  background: ", ";\n  border-radius: 2px;\n  flex: 0 0 auto;\n  letter-spacing: 0.53px;\n  font-size: 14px;\n  padding: 6px 9px 7px 10px;\n  * + & {\n    margin-left: 6px;\n  }\n  cursor: pointer;\n  transition: 0.1s linear background-color;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  font-weight: 600;\n  color: ", ";\n  background: ", ";\n  border-radius: 2px;\n  flex: 0 0 auto;\n  letter-spacing: 0.53px;\n  font-size: 14px;\n  padding: 6px 9px 7px 10px;\n  * + & {\n    margin-left: 6px;\n  }\n  cursor: pointer;\n  transition: 0.1s linear background-color;\n  &:hover {\n    background-color: ", ";\n  }\n"])), fontColor, buttonColor, buttonHoverColor);
var TopBarWrapper = index_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  padding: 10px 10px 4px;\n  align-items: center;\n"], ["\n  display: flex;\n  background: ", ";\n  padding: 10px 10px 4px;\n  align-items: center;\n"])), backgroundColor);
var UrlBar = index_1.styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 4px;\n  color: ", ";\n  border: 1px solid ", ";\n  padding: 6px 12px;\n  font-size: 13px;\n  flex: 1;\n  &.active {\n    color: ", ";\n  }\n"], ["\n  background: ", ";\n  border-radius: 4px;\n  color: ", ";\n  border: 1px solid ", ";\n  padding: 6px 12px;\n  font-size: 13px;\n  flex: 1;\n  &.active {\n    color: ", ";\n  }\n"])), buttonColor, inactiveFontColor, barBorder, fontColor);
var UrlBarWrapper = index_1.styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  margin-left: 6px;\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  flex: 1;\n  margin-left: 6px;\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
var ReachError = index_1.styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: 5px;\n  display: flex;\n  align-items: center;\n  color: #f25c54;\n"], ["\n  position: absolute;\n  right: 5px;\n  display: flex;\n  align-items: center;\n  color: #f25c54;\n"])));
var bounceAnimation = styled_components_1.keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  0%, 100% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n"], ["\n  0%, 100% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n"])));
var Pulse = index_1.styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 16px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100%;\n  animation: ", " 2s infinite ease-in-out;\n  -webkit-animation: ", " 2s infinite ease-in-out;\n"], ["\n  width: 16px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100%;\n  animation: ", " 2s infinite ease-in-out;\n  -webkit-animation: ", " 2s infinite ease-in-out;\n"])), spinnerColor, bounceAnimation, bounceAnimation);
var DelayedPulse = index_1.styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 16px;\n  height: 16px;\n  position: absolute;\n  top: 0;\n  background-color: ", ";\n  border-radius: 100%;\n  animation: ", " 2s infinite ease-in-out;\n  -webkit-animation: ", " 2s infinite ease-in-out;\n  animation-delay: -1s;\n  -webkit-animation-delay: -1s;\n"], ["\n  width: 16px;\n  height: 16px;\n  position: absolute;\n  top: 0;\n  background-color: ", ";\n  border-radius: 100%;\n  animation: ", " 2s infinite ease-in-out;\n  -webkit-animation: ", " 2s infinite ease-in-out;\n  animation-delay: -1s;\n  -webkit-animation-delay: -1s;\n"])), spinnerColor, bounceAnimation, bounceAnimation);
var SpinnerWrapper = index_1.styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: relative;\n  margin: 6px;\n"], ["\n  position: relative;\n  margin: 6px;\n"])));
var Spinner = function Spinner() {
    return React.createElement(
        SpinnerWrapper,
        null,
        React.createElement(Pulse, null),
        React.createElement(DelayedPulse, null)
    );
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=TopBar.jsx.map