var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import map from 'lodash/map';
import Colour from 'color';
import styled, { css } from '@monstrosity/utilities/themed-components';
import { Collection, CollectionDivider } from '../Collection/collection';
import { Icon } from '../Icon/icon';
import { Panel } from '../Panel/panel';
var MenuItem = styled.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 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
var Head = styled.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 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 ? Colour(theme.style.colour.highlight).darken(0.3).hex() : theme.style.colour.constrast;
}); };
var selectedStyle = function (isColourful) { return 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 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 ? Colour(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;
}); };
export var Menu = function (_a) {
    var headerText = _a.headerText, items = _a.items, onClick = _a.onClick, isColourful = _a.isColourful;
    var header = headerText ? React.createElement(Head, { isColourful: isColourful }, headerText) : undefined;
    var options = map(items, function (item) {
        if (isMenuItem(item)) {
            return {
                'id': item.id,
                'onClick': function () { return onClick(item.id); },
                'ariaLabel': item.label,
                'children': React.createElement(MenuItem, { isColourful: isColourful },
                    React.createElement(Icon, { icon: item.icon }),
                    React.createElement(MenuItemLabel, null, item.label)),
            };
        }
        if (isDivider(item) && item.divider) {
            return {
                'content': item.divider,
            };
        }
        return {
            'content': React.createElement(CollectionDivider, { full: true }),
        };
    });
    return (React.createElement(Panel, { styleOverride: ColouredPanelStyle(isColourful) },
        React.createElement(Collection, { activeStyle: activeStyle(isColourful), selectedStyle: selectedStyle(isColourful), header: header, options: options })));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
