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);
};
import * as _ from "lodash";
import * as classnames from "classnames";
import MorePropTypes from "../utils/MorePropTypes";
import * as Overlay from "react-bootstrap/lib/Overlay";
import * as React from "react";
import * as PropTypes from "prop-types";
import * as FontAwesome from "react-fontawesome";
import FlexBox from "../flex/FlexBox";
import FlexItem from "../flex/FlexItem";
import Menu from "./Menu";
import Option from "./Option";
import { Type, ArrowType } from "./Type";
import { Button } from "../Button/Button";
import "./Caret.less";
import "./DropdownButton.less";
var propTypes = {
    ariaLabelSecondaryButton: PropTypes.string,
    children: MorePropTypes.oneOrManyOf(MorePropTypes.instanceOfComponent(Option)),
    className: PropTypes.string,
    disabled: PropTypes.bool,
    href: PropTypes.string,
    label: PropTypes.node.isRequired,
    onClick: PropTypes.func,
    size: PropTypes.oneOf(_.values(Button.Size)),
    target: PropTypes.oneOf(["_self", "_blank"]),
    type: PropTypes.oneOf(_.values(Type)),
    arrowType: PropTypes.oneOf(_.values(ArrowType)),
};
var defaultProps = {
    size: Button.Size.M,
    type: Type.SECONDARY,
    arrowType: ArrowType.CARET,
};
export var 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, { className: classnames(cssClass.SECTION, cssClass.MAIN), component: 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(cssClass.CONTAINER, className) }), this._renderMainButton()));
        }
        var arrowTypeRender;
        if (arrowType === ArrowType.CARET) {
            arrowTypeRender = (React.createElement("span", { className: cssClass.CARET_CONTAINER },
                React.createElement("span", { className: cssClass.CARET })));
        }
        else {
            arrowTypeRender = (React.createElement("span", { className: cssClass.CARET_CONTAINER },
                React.createElement(FontAwesome, { name: "ellipsis-v" })));
        }
        return (React.createElement("div", __assign({}, passthroughProps, { className: classnames(cssClass.CONTAINER, className) }),
            React.createElement(FlexBox, { className: cssClass.BUTTONS },
                this._renderMainButton(),
                React.createElement(Button, { className: classnames(cssClass.SECTION, cssClass.TOGGLE), disabled: disabled, onClick: function () { return _this.setState({ expanded: !expanded }); }, size: size, type: type, value: arrowTypeRender, ariaLabel: ariaLabelSecondaryButton })),
            React.createElement(Overlay, { className: cssClass.POPUP, container: this, onHide: function () { return _this.setState({ expanded: false }); }, placement: "bottom", rootClose: true, show: !disabled && expanded },
                React.createElement(Menu, { onHide: function () { return _this.setState({ expanded: false }); }, size: size, type: type }, children))));
    };
    DropdownButton.propTypes = propTypes;
    DropdownButton.defaultProps = defaultProps;
    DropdownButton.Option = Option;
    DropdownButton.Size = Button.Size;
    DropdownButton.Type = Type;
    DropdownButton.ArrowType = ArrowType;
    return DropdownButton;
}(React.PureComponent));
export default DropdownButton;
