import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { Token } from '../../components/dataDisplay/Token';
import { ChevronDownIcon } from '@fluentui/react-icons';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        borderRadius: '0px 0px 25px 25px ',
        paddingRight: (props) => props.toggleLabel && theme.spacing(2),
        background: (props) => props.color,
        cursor: 'pointer'
    },
    label: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        color: (props) => {
            var _a, _b, _c;
            return (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.getContrastText(props.color ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.secondary) === null || _c === void 0 ? void 0 : _c.main : props.color);
        }
    },
    token: {
        transform: (props) => (props.open ? 'rotateZ(-180deg)' : 'rotateZ(0deg)')
    }
}));
export const ExtenderToggle = (props) => {
    const classes = useStyles(props);
    const { onClick, toggleLabel, compact } = props;
    return (React.createElement("div", { className: !compact && classes.root, onClick: onClick }, React.createElement("div", { className: classes.token }, React.createElement(Token, { icon: ChevronDownIcon, color: "default", size: "small", variant: "filled", type: "icon", compact: compact })), React.createElement("div", { className: classes.label }, React.createElement(Typography, { variant: "caption" }, " ", toggleLabel, " "))));
};
ExtenderToggle.propTypes = {
    /**
     * onClick - click event for toggle
     */
    onClick: PropTypes.func,
    /**
     * toggleLabel - lable that appears on toggle
     */
    toggleLabel: PropTypes.string,
    /**
     * color - background color for the toggle button
     */
    color: PropTypes.string
};
//# sourceMappingURL=ExtenderToggle.js.map