"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIToggleButton = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const OptionButton = (props) => {
    const useStyles = (0, core_1.makeStyles)(() => ({
        container: {
            padding: "7px 12px",
            fontSize: "12px",
            fontWeight: 400,
            lineHeight: "17px",
            letterSpacing: "0px",
            textAlign: "center",
            cursor: "pointer",
            color: "rgba(39, 41, 50, 0.7)",
        },
        active: {
            background: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
            color: UIStyleConstants_1.UIStyleConstants.WHITE_COLOR,
        },
    }));
    const classes = useStyles();
    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)(classes.container, props.active && classes.active), onClick: (event) => {
            event.stopPropagation();
            props.onActive();
        }, children: [props.option.renderIcon && props.option.renderIcon(), props.option.renderUI ? props.option.renderUI() : props.option.text || props.option.value] }));
};
const UIToggleButton = (props) => {
    const useStyles = (0, core_1.makeStyles)(() => ({
        container: {
            background: "#FCFCFE",
            border: "1px solid rgba(39, 41, 50, 0.2)",
            borderRadius: "4px",
            display: "flex",
            flexDirection: props.direction === "vertical" ? "column" : "row",
        },
    }));
    const classes = useStyles();
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(classes.container, props.className), children: props.options.map((option, idx) => {
            return ((0, jsx_runtime_1.jsx)(OptionButton, { option: option, onActive: () => props.onChange(option.value), active: option.value === props.value }, idx));
        }) }));
};
exports.UIToggleButton = UIToggleButton;
//# sourceMappingURL=UIToggleButton.js.map