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));
};
import React from 'react';
import { propEq } from 'ramda';
import classnames from 'classnames';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import CircularProgress from '@mui/material/CircularProgress';
import { useCssVariableStyles } from '../hooks/useCssVariableStyles/useCssVariableStyles';
import styles from './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;
export 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 = 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(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: styles.menuItem
            };
            if (isButton(item)) {
                menuItemProps.onClick = function () { return item.onClick(value); };
                menuItemProps.className = classnames(menuItemProps.className, (_a = {},
                    _a[styles.firstMenuItemButton] = idx === firstButtonIdx,
                    _a));
            }
            return (React.createElement(MenuItem, __assign({ key: value }, menuItemProps, { "data-reltio-id": "reltio-profile-select-mode-".concat(value) }),
                React.createElement(Box, { className: styles.menuItemInner },
                    IconComponent && React.createElement(IconComponent, { className: styles.menuItemIcon }),
                    React.createElement(Box, null,
                        React.createElement(Typography, { className: styles.menuItemLabel }, label),
                        React.createElement(Typography, { className: styles.menuItemDescription }, description)))));
        });
    };
    return (React.createElement(Select, { style: variableStyles, className: styles.select, classes: {
            select: classnames(styles.root, styles[variant]),
            icon: classnames(styles.arrowIcon, styles[variant]),
            outlined: styles.outlined
        }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
            var _a = optionsGroup.find(propEq('value', value)) || {}, IconComponent = _a.icon, _b = _a.label, label = _b === void 0 ? value : _b, shortLabel = _a.shortLabel;
            return (React.createElement(Box, { className: styles.currentValue },
                loading ? (React.createElement(CircularProgress, { size: "1em", "data-reltio-id": "mode-loading-spinner", className: styles.currentValueIcon })) : (IconComponent && React.createElement(IconComponent, { className: styles.currentValueIcon })),
                React.createElement(Tooltip, { title: shortLabel !== null && shortLabel !== void 0 ? shortLabel : label },
                    React.createElement(Typography, { className: styles.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))));
};
