var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { makeStyles } from '@material-ui/core';
import { FluentButton } from '../UI/inputs/buttons/FluentButton';
const useStyles = makeStyles((theme) => ({
    button: {
        borderRadius: theme.spacing(5),
        width: (props) => props.width || '100%',
        backgroundColor: (props) => {
            var _a;
            return props.disabled
                ? 'none'
                : props.color
                    ? ((_a = theme.palette[props.color]) === null || _a === void 0 ? void 0 : _a.main)
                        ? theme.palette[props.color].main
                        : props.color
                    : theme.palette.secondary.main;
        },
        borderColor: (props) => props.disabled && theme.palette.grey[300],
        color: (props) => (props.disabled ? '#000 !important' : '#fff'),
        '&:hover': {
            color: '#000'
        }
    }
}));
/**
 * `ToggleButton` component
 */
export const ToggleButton = (props) => {
    const { variant = '', onClick, children } = props, otherProps = __rest(props, ["variant", "onClick", "children"]);
    const classes = useStyles(props);
    return (React.createElement(FluentButton, Object.assign({ onClick: onClick, className: classes.button, variant: variant }, otherProps), children));
};
//# sourceMappingURL=ToggleButton.js.map