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 __());
    };
})();
import React from 'react';
import isString from 'lodash/isString';
import map from 'lodash/map';
import { ButtonStyle } from '@monstrosity/enums';
import styled, { css } from '@monstrosity/utilities/themed-components';
import { CONSTANTS } from '@monstrosity/utilities/constants/constants';
import { BarButton } from '../Button';
import { Popoutable } from '../../primitives/Popoutable/popoutable';
import { Panel } from '../Panel/panel';
import { Collection } from '../Collection/collection';
var Sizer = styled.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 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\twidth: 100%;\n"], ["\n\twidth: 100%;\n"])));
var activeStyle = function (isColourful) { return 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 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)
*/
export var ColouredPanelStyle = function (isColourful) { return 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(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.createRef();
        _this.selection = React.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.createElement(Popoutable, { id: 3, opacity: CONSTANTS.NonFalseyZero, content: function (props) { return (React.createElement(Sizer, { ref: _this.popout },
                React.createElement(Panel, { styleOverride: ColouredPanelStyle(isColourful) },
                    React.createElement(Collection, { activeStyle: activeStyle(isColourful), selectedStyle: selectedStyle(isColourful), selectedId: selectedId, options: _this.wrapOptionEvents(options, props.onClosePopout) })))); } }, function (_a) {
            var onShowPopout = _a.onShowPopout;
            return (React.createElement(ComboRoot, { ref: _this.selection },
                React.createElement(BarButton, { label: isString(label) ? label : '', buttonStyle: ButtonStyle.Secondary, onClick: function () { _this.onShow(onShowPopout); } }, isString(label) ? undefined : label)));
        }));
    };
    return Combo;
}(React.PureComponent));
export { Combo };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
