"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __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;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__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 assign = require("lodash/assign");
var React = require("react");
var CloseIcon = require("react-icons/lib/md/close");
var MenuIcon = require("react-icons/lib/md/dehaze");
var recompose_1 = require("recompose");
var styled_components_1 = require("styled-components");
var styled_system_1 = require("styled-system");
var Container_1 = require("./Container");
var Grid_1 = require("./Grid");
var BrandBox = styled_components_1.default(Grid_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\theight: auto;\n\tmin-width: 150px;\n\talign-self: center;\n"], ["\n\tdisplay: flex;\n\theight: auto;\n\tmin-width: 150px;\n\talign-self: center;\n"])));
var IconBox = styled_components_1.default(Grid_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", " align-self: center;\n\tcursor: pointer;\n"], ["\n\t", " align-self: center;\n\tcursor: pointer;\n"])), styled_system_1.display);
var MenuBox = styled_components_1.default(Grid_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t", "\n\t", ";\n\ttext-align: center;\n\ttransition: max-height 0.4s ease-in-out;\n\talign-self: center;\n\toverflow: hidden;\n\n\ta {\n\t\twidth: 100%;\n\t\tdisplay: inline-block;\n\t}\n"], ["\n\t", "\n\t", ";\n\ttext-align: center;\n\ttransition: max-height 0.4s ease-in-out;\n\talign-self: center;\n\toverflow: hidden;\n\n\ta {\n\t\twidth: 100%;\n\t\tdisplay: inline-block;\n\t}\n"])), styled_system_1.display, styled_system_1.maxHeight);
var Navbar = (function (_super) {
    __extends(Navbar, _super);
    function Navbar(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            open: false,
        };
        return _this;
    }
    Navbar.prototype.toggle = function () {
        this.setState({
            open: !this.state.open,
        });
    };
    Navbar.prototype.render = function () {
        var _this = this;
        var _a = this.props, brand = _a.brand, children = _a.children, props = __rest(_a, ["brand", "children"]);
        return (React.createElement(Grid_1.Box, __assign({}, props),
            React.createElement(Container_1.default, null,
                React.createElement(Grid_1.Flex, { flexDirection: ['column', 'row'] },
                    React.createElement(Grid_1.Flex, null,
                        React.createElement(BrandBox, { p: 2 }, brand),
                        React.createElement(IconBox, { onClick: function () { return _this.toggle(); }, ml: ['auto', 0], p: 2, display: ['block', 'none'] }, this.state.open ? React.createElement(CloseIcon, null) : React.createElement(MenuIcon, null))),
                    React.createElement(MenuBox, { maxHeight: [this.state.open ? '100vh' : '0vh', 'none'], width: ['100%', 'auto'], ml: [0, 'auto'] }, children && (React.createElement(Grid_1.Flex, { width: ['100%', 'auto'], flexDirection: ['column', 'row'] }, React.Children.map(children, function (child, i) {
                        return (React.createElement(Grid_1.Box, { onClick: function () { return _this.toggle(); }, width: ['100%', 'auto'], p: 2, key: i }, child));
                    }))))))));
    };
    return Navbar;
}(React.Component));
var setDefaultProps = recompose_1.withProps(function (props) {
    return assign({
        color: 'white',
        bg: 'gray.dark',
    }, props);
});
exports.default = recompose_1.compose(setDefaultProps)(Navbar);
var templateObject_1, templateObject_2, templateObject_3;
