"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 __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var Typography_1 = __importDefault(require("@mui/material/Typography"));
var Button_1 = require("../Button/Button");
var colors_1 = require("../../base/colors");
var react_1 = __importDefault(require("react"));
var Flex_1 = __importDefault(require("../Flex/Flex"));
var lodash_1 = __importDefault(require("lodash"));
var Grid_1 = __importDefault(require("@mui/material/Grid"));
var button = {
    color: colors_1.text.primary,
    backgroundColor: "white",
    border: "1px solid white",
    justifyContent: "center",
    minWidth: "80%",
    height: "100%",
    "&:hover": {
        color: colors_1.text.primary,
        background: colors_1.purple.light,
        border: "1px solid " + colors_1.purple.dark,
        boxShadow: "2px 2px 12px " + colors_1.purple.light,
    },
};
var activeButton = {
    color: colors_1.text.primary,
    background: colors_1.purple.light,
    border: "1px solid " + colors_1.purple.dark,
};
var sizeToVariantMap = {
    small: "subtitle2",
    medium: "subtitle1",
    large: "h4",
};
function SelectButtons(_a) {
    var label = _a.label, _b = _a.gap, gap = _b === void 0 ? 2 : _b, _c = _a.size, size = _c === void 0 ? "small" : _c, options = _a.options, selectedValue = _a.selectedValue, setSelectedValue = _a.setSelectedValue, className = _a.className, _d = _a.multiSelect, multiSelect = _d === void 0 ? false : _d, _e = _a.column, column = _e === void 0 ? false : _e, sx = _a.sx;
    var variant = size ? sizeToVariantMap[size] : "subtitle1";
    var isValidMultiSelect = multiSelect && Array.isArray(selectedValue);
    var toggleValues = function (value) {
        if (!multiSelect) {
            return setSelectedValue(value);
        }
        var newSelectedValue = lodash_1.default.xor(selectedValue, [value]);
        setSelectedValue(newSelectedValue);
    };
    return (react_1.default.createElement(Flex_1.default, { column: true, width: "100%", py: 2, className: className },
        react_1.default.createElement(Flex_1.default, { mb: 2 },
            react_1.default.createElement(Typography_1.default, { variant: variant }, label)),
        react_1.default.createElement(Grid_1.default, { container: true, spacing: gap, className: "spec-select-button-grid" }, options.map(function (option) {
            var isActive = (isValidMultiSelect && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(option.value))) ||
                selectedValue === option.value;
            return (react_1.default.createElement(Grid_1.default, { item: true, key: option.value, xs: column ? 6 : 3 },
                react_1.default.createElement(Button_1.Button, { sx: __assign(__assign(__assign({}, button), (isActive && activeButton)), sx), color: "primary", size: size, variant: "outlined", onClick: function () { return toggleValues(option.value); } }, option.label)));
        }))));
}
exports.default = SelectButtons;
//# sourceMappingURL=SelectButtons.js.map