"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 = 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 __assign = (this && this.__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;
};
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 React = require("react");
var MenuIcon = require("react-icons/lib/md/dehaze");
var CloseIcon = require("react-icons/lib/md/close");
var styled_components_1 = require("styled-components");
var styled_system_1 = require("styled-system");
var Grid_1 = require("./Grid");
var Container_1 = require("./Container");
var display = styled_system_1.responsiveStyle('display', 'display');
var maxHeight = styled_system_1.responsiveStyle('max-height', 'maxHeight');
var BrandBox = Grid_1.Box.extend(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: auto;\n  min-width: 150px;\n  align-self: center;\n"], ["\n  display: flex;\n  height: auto;\n  min-width: 150px;\n  align-self: center;\n"])));
var IconBox = Grid_1.Box.extend(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " align-self: center;\n  cursor: pointer;\n"], ["\n  ", " align-self: center;\n  cursor: pointer;\n"])), display);
var MenuBox = Grid_1.Flex.extend(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " ", ";\n  text-align: center;\n  transition: max-height 0.4s ease-in-out;\n  align-self: center;\n  overflow: hidden;\n\n  a {\n    width: 100%;\n    display: inline-block;\n  }\n"], ["\n  ", " ", ";\n  text-align: center;\n  transition: max-height 0.4s ease-in-out;\n  align-self: center;\n  overflow: hidden;\n\n  a {\n    width: 100%;\n    display: inline-block;\n  }\n"])), display, 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, children = _a.children, brand = _a.brand, props = __rest(_a, ["children", "brand"]);
        return (React.createElement(Grid_1.Box, __assign({}, props),
            React.createElement(Container_1.default, null,
                React.createElement(Grid_1.Flex, { direction: ['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'] },
                        React.createElement(Grid_1.Flex, { width: ['100%', 'auto'], direction: ['column', 'row'] }, children.map(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));
Navbar.defaultProps = {
    color: 'white',
    bg: 'gray.dark'
};
exports.default = styled_components_1.withTheme(Navbar);
var templateObject_1, templateObject_2, templateObject_3;
