"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 __rest = undefined && undefined.__rest || function (s, e) {
    var t = {};
    for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
    }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 CopyToClipboard = require("react-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 shallowEqual_1 = require("../util/shallowEqual");
var TopBar = /** @class */function (_super) {
    __extends(TopBar, _super);
    function TopBar() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onChange = function (e) {
            if (typeof _this.props.onChangeEndpoint === 'function') {
                _this.props.onChangeEndpoint(e.target.value);
            }
        };
        _this.onKeyDown = function (e) {
            if (e.keyCode === 13 && typeof _this.props.onReloadSchema === 'function') {
                _this.props.onReloadSchema();
            }
        };
        return _this;
    }
    TopBar.prototype.shouldComponentUpdate = function (nextProps) {
        var deconstruct = function deconstruct(_a) {
            var sharing = _a.sharing,
                restProps = __rest(_a, ["sharing"]);
            return {
                sharing: sharing,
                restProps: restProps
            };
        };
        var deconstructedProps = deconstruct(this.props);
        var deconstructedNextProps = deconstruct(nextProps);
        var shouldUpdate = !shallowEqual_1.default(deconstructedProps.sharing, deconstructedNextProps.sharing) || !shallowEqual_1.default(deconstructedProps.restProps, deconstructedNextProps.restProps);
        return shouldUpdate;
    };
    TopBar.prototype.render = function () {
        var endpointUnreachable = this.props.endpointUnreachable;
        return React.createElement(
            TopBarWrapper,
            null,
            React.createElement(
                exports.Button,
                { onClick: this.props.onClickPrettify },
                "Prettify"
            ),
            React.createElement(
                exports.Button,
                { onClick: this.props.onClickHistory },
                "History"
            ),
            React.createElement(
                UrlBarWrapper,
                null,
                React.createElement(UrlBar, { value: this.props.endpoint, onChange: this.onChange, onKeyDown: this.onKeyDown, onBlur: this.props.onReloadSchema, 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.props.onReloadSchema })
            ),
            React.createElement(
                CopyToClipboard,
                { text: this.props.curl },
                React.createElement(
                    exports.Button,
                    null,
                    "Copy CURL"
                )
            ),
            this.props.sharing && React.createElement(
                Share_1.default,
                this.props.sharing,
                React.createElement(
                    exports.Button,
                    null,
                    "Share Playground"
                )
            )
        );
    };
    return TopBar;
}(React.Component);
exports.default = 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