"use strict";
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModeSwitcherSelect = void 0;
var react_1 = __importDefault(require("react"));
var ramda_1 = require("ramda");
var classnames_1 = __importDefault(require("classnames"));
var Select_1 = __importDefault(require("@mui/material/Select"));
var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
var Box_1 = __importDefault(require("@mui/material/Box"));
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles/useCssVariableStyles");
var ModeSwitcherSelect_module_css_1 = __importDefault(require("./ModeSwitcherSelect.module.css"));
var isButton = function (value) { return 'onClick' in value; };
var MAX_WIDTH_SELECT = 200;
var SELECT_PADDING_RIGHT = 32;
var SELECT_PADDING_LEFT = 12;
var CALCULATED_MAX_WIDTH_SELECT = MAX_WIDTH_SELECT - SELECT_PADDING_LEFT - SELECT_PADDING_RIGHT;
var ModeSwitcherSelect = function (_a) {
    var _b = _a.optionsGroup, optionsGroup = _b === void 0 ? [] : _b, _c = _a.buttonsGroup, buttonsGroup = _c === void 0 ? [] : _c, value = _a.value, onChange = _a.onChange, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.variant, variant = _f === void 0 ? 'normal' : _f;
    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
        '--max-width-select': "".concat(CALCULATED_MAX_WIDTH_SELECT, "px"),
        '--select-padding-right': "".concat(SELECT_PADDING_RIGHT, "px"),
        '--select-padding-left': "".concat(SELECT_PADDING_LEFT, "px")
    });
    var handleChange = function (e) {
        var value = e.target.value;
        var isOption = optionsGroup.some((0, ramda_1.propEq)('value', value));
        if (isOption)
            onChange(value);
    };
    var renderMenuItems = function (items) {
        var firstButtonIdx = items.findIndex(isButton);
        return items.map(function (item, idx) {
            var _a;
            var value = item.value, label = item.label, description = item.description, IconComponent = item.icon;
            var menuItemProps = {
                value: value,
                className: ModeSwitcherSelect_module_css_1.default.menuItem
            };
            if (isButton(item)) {
                menuItemProps.onClick = function () { return item.onClick(value); };
                menuItemProps.className = (0, classnames_1.default)(menuItemProps.className, (_a = {},
                    _a[ModeSwitcherSelect_module_css_1.default.firstMenuItemButton] = idx === firstButtonIdx,
                    _a));
            }
            return (react_1.default.createElement(MenuItem_1.default, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-".concat(value) }),
                react_1.default.createElement(Box_1.default, { className: ModeSwitcherSelect_module_css_1.default.menuItemInner },
                    IconComponent && react_1.default.createElement(IconComponent, { className: ModeSwitcherSelect_module_css_1.default.menuItemIcon }),
                    react_1.default.createElement(Box_1.default, null,
                        react_1.default.createElement(Typography_1.default, { className: ModeSwitcherSelect_module_css_1.default.menuItemLabel }, label),
                        react_1.default.createElement(Typography_1.default, { className: ModeSwitcherSelect_module_css_1.default.menuItemDescription }, description)))));
        });
    };
    return (react_1.default.createElement(Select_1.default, { style: variableStyles, className: ModeSwitcherSelect_module_css_1.default.select, classes: {
            select: (0, classnames_1.default)(ModeSwitcherSelect_module_css_1.default.root, ModeSwitcherSelect_module_css_1.default[variant]),
            icon: (0, classnames_1.default)(ModeSwitcherSelect_module_css_1.default.arrowIcon, ModeSwitcherSelect_module_css_1.default[variant]),
            outlined: ModeSwitcherSelect_module_css_1.default.outlined
        }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
            var _a = optionsGroup.find((0, ramda_1.propEq)('value', value)) || {}, IconComponent = _a.icon, _b = _a.label, label = _b === void 0 ? value : _b, shortLabel = _a.shortLabel;
            return (react_1.default.createElement(Box_1.default, { className: ModeSwitcherSelect_module_css_1.default.currentValue },
                loading ? (react_1.default.createElement(CircularProgress_1.default, { size: "1em", "data-reltio-id": "mode-loading-spinner", className: ModeSwitcherSelect_module_css_1.default.currentValueIcon })) : (IconComponent && react_1.default.createElement(IconComponent, { className: ModeSwitcherSelect_module_css_1.default.currentValueIcon })),
                react_1.default.createElement(Tooltip_1.default, { title: shortLabel !== null && shortLabel !== void 0 ? shortLabel : label },
                    react_1.default.createElement(Typography_1.default, { className: ModeSwitcherSelect_module_css_1.default.currentValueText }, shortLabel !== null && shortLabel !== void 0 ? shortLabel : label))));
        }, MenuProps: {
            anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'right'
            },
            transformOrigin: {
                vertical: 'top',
                horizontal: 'right'
            }
        }, disabled: disabled, "data-reltio-id": "reltio-profile-select-mode" }, renderMenuItems(__spreadArray(__spreadArray([], optionsGroup, true), buttonsGroup, true))));
};
exports.ModeSwitcherSelect = ModeSwitcherSelect;
