"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 __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 map_1 = __importDefault(require("lodash/map"));
var color_1 = __importDefault(require("color"));
var themed_components_1 = __importStar(require("@monstrosity/utilities/themed-components"));
var collection_1 = require("../Collection/collection");
var icon_1 = require("../Icon/icon");
var panel_1 = require("../Panel/panel");
var MenuItem = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  color: ", ";\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n"], ["\n  display: flex;\n  color: ", ";\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n"])), function (_a) {
    var theme = _a.theme, isColourful = _a.isColourful;
    return isColourful ? theme.style.colour.backset : theme.style.colour.highlight;
});
var MenuItemLabel = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
var Head = themed_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0.75rem;\n  color: ", ";\n  font-size: 1.25rem;\n  font-weight: ", ";\n"], ["\n  padding: 0.75rem;\n  color: ", ";\n  font-size: 1.25rem;\n  font-weight: ", ";\n"])), function (_a) {
    var theme = _a.theme, isColourful = _a.isColourful;
    return isColourful ? theme.style.colour.backset : theme.style.colour.highlight;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.strong;
});
var activeStyle = function (isColourful) { return themed_components_1.css(templateObject_4 || (templateObject_4 = __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 ? color_1.default(theme.style.colour.highlight).darken(0.3).hex() : theme.style.colour.constrast;
}); };
var selectedStyle = function (isColourful) { return themed_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tbackground: ", ";\n"], ["\n\tbackground: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.hover : theme.style.colour.disabled.background;
}); };
function isDivider(props) {
    if (props.divider)
        return true;
    return false;
}
function isMenuItem(props) {
    if (props.label)
        return true;
    return false;
}
var ColouredPanelStyle = function (isColourful) { return themed_components_1.css(templateObject_6 || (templateObject_6 = __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 ? color_1.default(theme.style.colour.highlight).darken(0.4).hex() : theme.style.colour.background;
}, function (_a) {
    var theme = _a.theme;
    return isColourful ? theme.style.colour.highlight : theme.style.colour.hover;
}); };
exports.Menu = function (_a) {
    var headerText = _a.headerText, items = _a.items, onClick = _a.onClick, isColourful = _a.isColourful;
    var header = headerText ? react_1.default.createElement(Head, { isColourful: isColourful }, headerText) : undefined;
    var options = map_1.default(items, function (item) {
        if (isMenuItem(item)) {
            return {
                'id': item.id,
                'onClick': function () { return onClick(item.id); },
                'ariaLabel': item.label,
                'children': react_1.default.createElement(MenuItem, { isColourful: isColourful },
                    react_1.default.createElement(icon_1.Icon, { icon: item.icon }),
                    react_1.default.createElement(MenuItemLabel, null, item.label)),
            };
        }
        if (isDivider(item) && item.divider) {
            return {
                'content': item.divider,
            };
        }
        return {
            'content': react_1.default.createElement(collection_1.CollectionDivider, { full: true }),
        };
    });
    return (react_1.default.createElement(panel_1.Panel, { styleOverride: ColouredPanelStyle(isColourful) },
        react_1.default.createElement(collection_1.Collection, { activeStyle: activeStyle(isColourful), selectedStyle: selectedStyle(isColourful), header: header, options: options })));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
