"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);
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
require("./FloatingButton.less");
var PropTypes = require("prop-types");
var React = require("react");
var RootCloseWrapper = require("react-overlays/lib/RootCloseWrapper");
var _ = require("lodash");
var classnames = require("classnames");
var Button_1 = require("../Button/Button");
var FlexBox_1 = require("../flex/FlexBox");
var Icon_1 = require("../Icon/Icon");
var Constants_1 = require("../utils/Constants");
var cssClass = {
    ACTIVE: "FloatingButton--active",
    ANIMATE: "FloatingButton--animate",
    inactive: function (positionY) { return "FloatingButton--inactive--" + positionY; },
    propStyle: function (prop) { return "FloatingButton--" + prop; },
    BUTTON: "FloatingButton--button",
    CONTAINER: "FloatingButton--container",
    ICON: "FloatingButton--icon",
    SUB_ELEMENT: "FloatingButton--subElement",
};
var PositionX = {
    LEFT: "left",
    CENTER: "center",
    RIGHT: "right",
};
var PositionY = {
    BOTTOM: "bottom",
    TOP: "top",
};
// TODO: Move to <Button /> component
var ColorGroup = {
    GREEN: "green",
};
var propTypes = {
    animate: PropTypes.bool,
    additionalButtons: PropTypes.array,
    ariaLabel: PropTypes.string,
    colorGroup: PropTypes.oneOf(Object.values(ColorGroup)),
    className: PropTypes.string,
    closeLabel: PropTypes.node,
    label: PropTypes.node,
    onClick: PropTypes.func,
    offsetX: PropTypes.string,
    offsetY: PropTypes.string,
    positionX: PropTypes.oneOf(Object.values(PositionX)),
    positionY: PropTypes.oneOf(Object.values(PositionY)),
    size: PropTypes.oneOf(Object.values(Button_1.Button.Size)),
};
var defaultProps = {
    animate: true,
    label: "+",
    offsetX: "2",
    offsetY: "2",
    positionX: PositionX.RIGHT,
    positionY: PositionY.BOTTOM,
};
var iconSizes = (_a = {},
    _a[Button_1.Button.Size.S] = Icon_1.Icon.sizes.XXS,
    _a[Button_1.Button.Size.M] = Icon_1.Icon.sizes.XS,
    _a[Button_1.Button.Size.L] = Icon_1.Icon.sizes.XS,
    _a);
// add 'rem' if input is a number
function addSizeUnit(input) {
    var result = input;
    if (!isNaN(+input)) {
        result = input + "rem";
    }
    return result;
}
var FloatingButton = /** @class */ (function (_super) {
    __extends(FloatingButton, _super);
    function FloatingButton(props) {
        var _this = _super.call(this, props) || this;
        _this.onWindowResize = _.throttle(function () {
            _this.setState({ positionX: _this.positionX() });
        }, 1000);
        _this.mainButtonHandler = function () {
            var _a = _this.props, additionalButtons = _a.additionalButtons, onClick = _a.onClick;
            var active = _this.state.active;
            if (additionalButtons && additionalButtons.length) {
                // main button activates additional buttons
                _this.setState({ active: !active });
            }
            if (onClick) {
                onClick();
            }
        };
        _this.onRootClose = function () {
            _this.setState({ active: false });
        };
        _this.state = {
            active: false,
            positionX: _this.positionX(),
        };
        return _this;
    }
    FloatingButton.prototype.componentDidMount = function () {
        window.addEventListener("resize", this.onWindowResize);
    };
    FloatingButton.prototype.positionX = function () {
        return window.innerWidth <= Constants_1.breakpointS ? PositionX.CENTER : this.props.positionX;
    };
    FloatingButton.prototype.horizontalStyle = function () {
        var offsetX = this.props.offsetX;
        var positionX = this.state.positionX;
        if (positionX === PositionX.CENTER)
            return {};
        return positionX === PositionX.LEFT
            ? {
                left: addSizeUnit(offsetX),
            }
            : {
                // default to right if a bad positionX input provided
                right: addSizeUnit(offsetX),
            };
    };
    FloatingButton.prototype.verticalStyle = function () {
        var _a = this.props, offsetY = _a.offsetY, positionY = _a.positionY;
        return positionY === PositionY.TOP
            ? {
                top: addSizeUnit(offsetY),
            }
            : {
                // default to bottom orientation
                bottom: addSizeUnit(offsetY),
            };
    };
    FloatingButton.prototype.additionalButtonHandler = function (button) {
        this.setState({ active: false });
        button.onClick();
    };
    FloatingButton.prototype.render = function () {
        var _this = this;
        var _a = this.props, additionalButtons = _a.additionalButtons, animate = _a.animate, ariaLabel = _a.ariaLabel, colorGroup = _a.colorGroup, className = _a.className, closeLabel = _a.closeLabel, label = _a.label, positionY = _a.positionY, size = _a.size;
        var _b = this.state, active = _b.active, positionX = _b.positionX;
        var additionalProps = _.omit(this.props, Object.keys(propTypes));
        return (React.createElement(RootCloseWrapper, { onRootClose: this.onRootClose },
            React.createElement(FlexBox_1.default, __assign({}, additionalProps, { className: classnames(cssClass.CONTAINER, cssClass.propStyle(positionX), cssClass.propStyle(positionY), className), style: __assign(__assign({}, this.horizontalStyle()), this.verticalStyle()) }),
                React.createElement("div", { className: classnames(cssClass.SUB_ELEMENT) },
                    React.createElement(Button_1.Button, { className: classnames(cssClass.BUTTON, colorGroup && cssClass.propStyle(colorGroup), active && cssClass.propStyle("gray")), ariaLabel: ariaLabel, onClick: this.mainButtonHandler, value: active
                            ? closeLabel || (React.createElement(FlexBox_1.default, { alignItems: "center" },
                                React.createElement(Icon_1.Icon, { className: cssClass.ICON, size: iconSizes[size], name: Icon_1.Icon.names.CLOSE_FLOATING_BUTTON }),
                                " ",
                                "Close"))
                            : label, "aria-expanded": additionalButtons ? active : null, size: size || Button_1.Button.Size.M })),
                additionalButtons &&
                    additionalButtons.map(function (button, i) { return (React.createElement("div", { className: classnames(cssClass.SUB_ELEMENT, !active && cssClass.inactive(positionY), animate && cssClass.ANIMATE, button.className), key: i },
                        React.createElement(Button_1.Button, { className: classnames(cssClass.BUTTON, colorGroup && cssClass.propStyle(colorGroup)), ariaLabel: button.ariaLabel, onClick: function () { return _this.additionalButtonHandler(button); }, value: button.label, size: size || Button_1.Button.Size.M, display: !active ? "none" : "block" }))); }))));
    };
    FloatingButton.propTypes = propTypes;
    FloatingButton.defaultProps = defaultProps;
    FloatingButton.ColorGroup = ColorGroup;
    FloatingButton.PositionX = PositionX;
    FloatingButton.PositionY = PositionY;
    return FloatingButton;
}(React.PureComponent));
exports.default = FloatingButton;
