"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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var isString_1 = __importDefault(require("lodash/isString"));
var map_1 = __importDefault(require("lodash/map"));
var enums_1 = require("@monstrosity/enums");
var themed_components_1 = __importStar(require("@monstrosity/utilities/themed-components"));
var constants_1 = require("@monstrosity/utilities/constants/constants");
var Button_1 = require("../Button");
var popoutable_1 = require("../../primitives/Popoutable/popoutable");
var panel_1 = require("../Panel/panel");
var collection_1 = require("../Collection/collection");
var Sizer = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t/* Set Below */\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\topacity: 0;\n"], ["\n\t/* Set Below */\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\topacity: 0;\n"])));
var ComboRoot = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\twidth: 100%;\n"], ["\n\twidth: 100%;\n"])));
var activeStyle = function (isColourful) { return themed_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tbackground: ", ";\n\ttransition: background-color 50ms;\n"], ["\n\tbackground: ", ";\n\ttransition: background-color 50ms;\n"])), function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.active : theme.style.colour.constrast;
}); };
var selectedStyle = function (isColourful) { return themed_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tbackground: ", ";\n"], ["\n\tbackground: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.hover : theme.style.colour.disabled.background;
}); };
/* Needs to have a couple of modes
 * 1. With a title
 * 2. Select (Selection)
 * 3. Select with text filter (Combo)
 * 4. Show Context Menu (ContextMenu)
*/
exports.ColouredPanelStyle = function (isColourful) { return themed_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tbox-shadow: 0.25rem 0.25rem 0.5rem ", ";\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\tborder: 1px solid ", "; \n\tpadding: 0.5rem 0;\n"], ["\n\tbox-shadow: 0.25rem 0.25rem 0.5rem ", ";\n\tborder-radius: 0.25rem;\n\tbackground-color: ", ";\n\tborder: 1px solid ", "; \n\tpadding: 0.5rem 0;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.shadow;
}, function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.highlight : theme.style.colour.background;
}, function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.active : theme.style.colour.hover;
}); };
var Combo = /** @class */ (function (_super) {
    __extends(Combo, _super);
    function Combo(props) {
        var _this = _super.call(this, props) || this;
        _this.wrapOptionEvents = function (options, onClose) {
            return map_1.default(options, function (option) {
                var wrappedOption = option;
                wrappedOption.onClick = _this.clickProxy(option.onClick, onClose, option.id);
                return wrappedOption;
            });
        };
        _this.clickProxy = function (onClick, onClose, id) {
            var keepOpenOnSelect = _this.props.keepOpenOnSelect;
            return function () {
                if (!keepOpenOnSelect)
                    onClose();
                onClick(id);
            };
        };
        _this.onShow = function (onShowPopout) {
            setTimeout(function () {
                var button = _this.selection;
                var popout = _this.popout;
                if (button.current && popout.current) {
                    var buttonRect = button.current.getBoundingClientRect();
                    popout.current.style.left = buttonRect.left + "px";
                    popout.current.style.top = buttonRect.top + "px";
                    popout.current.style.maxHeight = buttonRect.bottom - 16 + "px";
                    popout.current.style.width = buttonRect.width + "px";
                    popout.current.style.opacity = '1';
                    /* Set Focus to Popout Here so that Arrow Keys can be used */
                    var collection = popout.current.querySelector('[tabindex="0"]');
                    if (collection)
                        collection.focus();
                }
            }, 50);
            onShowPopout();
        };
        _this.popout = react_1.default.createRef();
        _this.selection = react_1.default.createRef();
        return _this;
    }
    Combo.prototype.render = function () {
        var _this = this;
        var _a = this.props, label = _a.label, options = _a.options, isColourful = _a.isColourful, selectedId = _a.selectedId;
        return (react_1.default.createElement(popoutable_1.Popoutable, { id: 3, opacity: constants_1.CONSTANTS.NonFalseyZero, content: function (props) { return (react_1.default.createElement(Sizer, { ref: _this.popout },
                react_1.default.createElement(panel_1.Panel, { styleOverride: exports.ColouredPanelStyle(isColourful) },
                    react_1.default.createElement(collection_1.Collection, { activeStyle: activeStyle(isColourful), selectedStyle: selectedStyle(isColourful), selectedId: selectedId, options: _this.wrapOptionEvents(options, props.onClosePopout) })))); } }, function (_a) {
            var onShowPopout = _a.onShowPopout;
            return (react_1.default.createElement(ComboRoot, { ref: _this.selection },
                react_1.default.createElement(Button_1.BarButton, { label: isString_1.default(label) ? label : '', buttonStyle: enums_1.ButtonStyle.Secondary, onClick: function () { _this.onShow(onShowPopout); } }, isString_1.default(label) ? undefined : label)));
        }));
    };
    return Combo;
}(react_1.default.PureComponent));
exports.Combo = Combo;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
