"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.cssClass = void 0;
var _ = require("lodash");
var classnames = require("classnames");
var MorePropTypes_1 = require("../utils/MorePropTypes");
var Overlay = require("react-bootstrap/lib/Overlay");
var React = require("react");
var PropTypes = require("prop-types");
var FontAwesome = require("react-fontawesome");
var FlexBox_1 = require("../flex/FlexBox");
var FlexItem_1 = require("../flex/FlexItem");
var Menu_1 = require("./Menu");
var Option_1 = require("./Option");
var Type_1 = require("./Type");
var Button_1 = require("../Button/Button");
require("./Caret.less");
require("./DropdownButton.less");
var propTypes = {
    ariaLabelSecondaryButton: PropTypes.string,
    children: MorePropTypes_1.default.oneOrManyOf(MorePropTypes_1.default.instanceOfComponent(Option_1.default)),
    className: PropTypes.string,
    disabled: PropTypes.bool,
    href: PropTypes.string,
    label: PropTypes.node.isRequired,
    onClick: PropTypes.func,
    size: PropTypes.oneOf(_.values(Button_1.Button.Size)),
    target: PropTypes.oneOf(["_self", "_blank"]),
    type: PropTypes.oneOf(_.values(Type_1.Type)),
    arrowType: PropTypes.oneOf(_.values(Type_1.ArrowType)),
};
var defaultProps = {
    size: Button_1.Button.Size.M,
    type: Type_1.Type.SECONDARY,
    arrowType: Type_1.ArrowType.CARET,
};
exports.cssClass = {
    BUTTONS: "DropdownButton--buttons",
    CARET_CONTAINER: "DropdownButton--Caret--container",
    CARET: "DropdownButton--Caret",
    CONTAINER: "DropdownButton",
    MAIN: "DropdownButton--main",
    POPUP: "DropdownButton--popup",
    SECTION: "DropdownButton--section",
    TOGGLE: "DropdownButton--toggle",
};
var DropdownButton = /** @class */ (function (_super) {
    __extends(DropdownButton, _super);
    function DropdownButton(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            expanded: false,
        };
        return _this;
    }
    DropdownButton.prototype._renderMainButton = function () {
        var _a = this.props, disabled = _a.disabled, href = _a.href, label = _a.label, onClick = _a.onClick, size = _a.size, target = _a.target, type = _a.type;
        return (React.createElement(FlexItem_1.default, { className: classnames(exports.cssClass.SECTION, exports.cssClass.MAIN), component: Button_1.Button, disabled: disabled, grow: true, href: href, onClick: onClick, size: size, target: target, type: type, value: label }));
    };
    DropdownButton.prototype.render = function () {
        var _this = this;
        var _a = this.props, ariaLabelSecondaryButton = _a.ariaLabelSecondaryButton, children = _a.children, className = _a.className, disabled = _a.disabled, size = _a.size, type = _a.type, arrowType = _a.arrowType;
        var passthroughProps = _.omit(this.props, Object.keys(propTypes));
        var expanded = this.state.expanded;
        if (React.Children.count(children) === 0) {
            return (React.createElement("div", __assign({}, passthroughProps, { className: classnames(exports.cssClass.CONTAINER, className) }), this._renderMainButton()));
        }
        var arrowTypeRender;
        if (arrowType === Type_1.ArrowType.CARET) {
            arrowTypeRender = (React.createElement("span", { className: exports.cssClass.CARET_CONTAINER },
                React.createElement("span", { className: exports.cssClass.CARET })));
        }
        else {
            arrowTypeRender = (React.createElement("span", { className: exports.cssClass.CARET_CONTAINER },
                React.createElement(FontAwesome, { name: "ellipsis-v" })));
        }
        return (React.createElement("div", __assign({}, passthroughProps, { className: classnames(exports.cssClass.CONTAINER, className) }),
            React.createElement(FlexBox_1.default, { className: exports.cssClass.BUTTONS },
                this._renderMainButton(),
                React.createElement(Button_1.Button, { className: classnames(exports.cssClass.SECTION, exports.cssClass.TOGGLE), disabled: disabled, onClick: function () { return _this.setState({ expanded: !expanded }); }, size: size, type: type, value: arrowTypeRender, ariaLabel: ariaLabelSecondaryButton })),
            React.createElement(Overlay, { className: exports.cssClass.POPUP, container: this, onHide: function () { return _this.setState({ expanded: false }); }, placement: "bottom", rootClose: true, show: !disabled && expanded },
                React.createElement(Menu_1.default, { onHide: function () { return _this.setState({ expanded: false }); }, size: size, type: type }, children))));
    };
    DropdownButton.propTypes = propTypes;
    DropdownButton.defaultProps = defaultProps;
    DropdownButton.Option = Option_1.default;
    DropdownButton.Size = Button_1.Button.Size;
    DropdownButton.Type = Type_1.Type;
    DropdownButton.ArrowType = Type_1.ArrowType;
    return DropdownButton;
}(React.PureComponent));
exports.default = DropdownButton;
