"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 React = require("react");
var IconCaretDown = require("react-icons/lib/fa/caret-down");
var IconCaretUp = require("react-icons/lib/fa/caret-up");
var recompose_1 = require("recompose");
var styled_components_1 = require("styled-components");
var styled_system_1 = require("styled-system");
var theme_1 = require("../theme");
var utils_1 = require("../utils");
var Button_1 = require("./Button");
var Divider_1 = require("./Divider");
var Fixed_1 = require("./Fixed");
var Grid_1 = require("./Grid");
var ToggleBase = styled_components_1.default(Button_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tmin-width: 0;\n\tborder-top-left-radius: 0;\n\tborder-bottom-left-radius: 0;\n\tmargin-left: -1px;\n\tborder-left: 0;\n\tmargin: 0;\n\tvertical-align: top;\n"], ["\n\tmin-width: 0;\n\tborder-top-left-radius: 0;\n\tborder-bottom-left-radius: 0;\n\tmargin-left: -1px;\n\tborder-left: 0;\n\tmargin: 0;\n\tvertical-align: top;\n"])));
var ButtonBase = styled_components_1.default(Button_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tborder-top-right-radius: 0;\n\tborder-bottom-right-radius: 0;\n\tborder-right: 0;\n\tmargin: 0;\n"], ["\n\tborder-top-right-radius: 0;\n\tborder-bottom-right-radius: 0;\n\tborder-right: 0;\n\tmargin: 0;\n"])));
var MenuBase = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: white;\n  position: absolute;\n  min-width: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n  border: ", ";\n  z-index: 1;\n  margin-top: 2px;\n  left: ", ";\n  right: ", ";\n  white-space: nowrap;\n  max-height: ", ";\n  overflow-y: auto;\n"], ["\n  background: white;\n  position: absolute;\n  min-width: ", ";\n  box-shadow: ", ";\n  border-radius: ", ";\n  border: ", ";\n  z-index: 1;\n  margin-top: 2px;\n  left: ", ";\n  right: ", ";\n  white-space: nowrap;\n  max-height: ", ";\n  overflow-y: auto;\n"])), function (props) { return props.minWidth; }, function (props) { return '1px 1px 5px' + props.theme.colors.gray.light; }, function (props) { return utils_1.px(props.theme.radius); }, function (props) { return '1px solid ' + props.theme.colors.gray.main; }, function (props) { return (props.alignRight ? 'auto' : 0); }, function (props) { return (!props.alignRight ? 'auto' : 0); }, function (props) { return props.maxHeight || 'auto'; });
MenuBase.defaultProps = { theme: theme_1.default };
var Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " ", " ", " ", " display: inline-block;\n  border-radius: ", ";\n  vertical-align: top;\n  position: relative;\n"], ["\n  ", " ", " ", " ", " display: inline-block;\n  border-radius: ", ";\n  vertical-align: top;\n  position: relative;\n"])), styled_system_1.space, styled_system_1.width, styled_system_1.fontSize, styled_system_1.color, function (props) { return utils_1.px(props.theme.radius); });
var Item = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-top: 5px;\n  padding-bottom: 5px;\n  padding-left: 16px;\n  padding-right: 16px;\n  border-top: ", ";\n  border-radius: ", ";\n\n  &:hover:enabled {\n    background: ", ";\n  }\n"], ["\n  padding-top: 5px;\n  padding-bottom: 5px;\n  padding-left: 16px;\n  padding-right: 16px;\n  border-top: ",
    ";\n  border-radius: ", ";\n\n  &:hover:enabled {\n    background: ", ";\n  }\n"])), function (props) {
    return props.border ? "1px solid " + props.theme.colors.gray.main : '0';
}, function (props) { return utils_1.px(props.theme.radius); }, function (props) { return props.theme.colors.gray.light; });
Item.defaultProps = { theme: theme_1.default };
var IconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\twidth: 28px;\n"], ["\n\twidth: 28px;\n"])));
var JoinedButton = styled_components_1.default(Button_1.default)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tmargin: 0;\n"], ["\n\tmargin: 0;\n"])));
var Toggle = function (_a) {
    var open = _a.open, handler = _a.handler, label = _a.label, joined = _a.joined, props = __rest(_a, ["open", "handler", "label", "joined"]);
    if (joined) {
        if (label) {
            return (React.createElement(JoinedButton, __assign({}, props, { pl: 16, pr: 0, onClick: handler }),
                React.createElement(Grid_1.Flex, { justify: "space-between", align: "center" },
                    React.createElement(Grid_1.Box, { mt: "1px" }, label),
                    React.createElement(IconWrapper, null, open ? React.createElement(IconCaretUp, null) : React.createElement(IconCaretDown, null)))));
        }
        return (React.createElement(JoinedButton, __assign({}, props, { square: true, onClick: handler }), open ? React.createElement(IconCaretUp, null) : React.createElement(IconCaretDown, null)));
    }
    return (React.createElement(ToggleBase, __assign({}, props, { onClick: handler }), open ? React.createElement(IconCaretUp, null) : React.createElement(IconCaretDown, null)));
};
var DropDownButton = (function (_super) {
    __extends(DropDownButton, _super);
    function DropDownButton(props) {
        var _this = _super.call(this, props) || this;
        _this.toggle = function () {
            _this.setState({
                open: !_this.state.open,
                minWidth: _this.base && _this.base.offsetWidth,
            });
        };
        _this.state = {
            open: false,
            minWidth: 0,
        };
        return _this;
    }
    DropDownButton.prototype.render = function () {
        var _a = this.props, alignRight = _a.alignRight, children = _a.children, label = _a.label, border = _a.border, joined = _a.joined, noListFormat = _a.noListFormat, outline = _a.outline, tooltip = _a.tooltip, props = __rest(_a, ["alignRight", "children", "label", "border", "joined", "noListFormat", "outline", "tooltip"]);
        return (React.createElement(Wrapper, __assign({}, props),
            joined ? (React.createElement(Toggle, __assign({}, props, { tooltip: tooltip, outline: outline, joined: joined, label: label, handler: this.toggle, open: this.state.open }))) : (React.createElement("span", null,
                React.createElement(ButtonBase, __assign({}, props, { tooltip: tooltip, outline: outline }), label),
                React.createElement(Toggle, __assign({}, props, { outline: outline, handler: this.toggle, open: this.state.open })))),
            this.state.open && React.createElement(Fixed_1.default, { onClick: this.toggle }),
            this.state.open && (React.createElement(MenuBase, { alignRight: alignRight, onClick: this.toggle, minWidth: this.state.minWidth + "px", maxHeight: utils_1.px(this.props.maxHeight) }, React.Children.map(children, function (child, i) {
                if (noListFormat) {
                    return child;
                }
                if (!child) {
                    return;
                }
                if (child.type === Divider_1.default) {
                    return child;
                }
                return (React.createElement(Item, { border: Boolean(border && i), key: i }, child));
            })))));
    };
    return DropDownButton;
}(React.Component));
exports.default = recompose_1.compose(styled_components_1.withTheme)(DropDownButton);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
