import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core';
import { ExtenderToggle } from './ui/ExtenderToggle';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%'
    },
    container: {
        padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),
        parddingRight: theme.spacing(1),
        parddingleft: theme.spacing(1),
        background: (props) => props.color
    },
    lowerShelf: {
        display: 'flex'
    },
    shelfOptions: {
        flex: 1,
        width: '100%'
    }
}));
export const ToggleSection = (props) => {
    const classes = useStyles(props);
    const { children, onClick, sectionOpen, options, toggleLabel, color } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.container }, " ", children, " "), React.createElement("div", { className: classes.lowerShelf }, React.createElement("div", { className: classes.shelfOptions }, options), React.createElement("div", null, React.createElement(ExtenderToggle, { onClick: onClick, open: sectionOpen, toggleLabel: toggleLabel, color: color })))));
};
ToggleSection.propTypes = {
    /**
     * Contents of container
     */
    children: PropTypes.node,
    /**
     * Function to trigger panel to open and close
     */
    onClick: PropTypes.func,
    /**
     * State, if true, will cause panel to open. If false, the panel is closed.
     */
    sectionOpen: PropTypes.bool,
    /**
     * Shelf below drawer that fills the space left by the toggle button.
     * Can be used to add things like additional toggles, other buttons,
     * stats, etc.
     */
    options: PropTypes.node,
    /**
     * The label that appears on the toggle tab.
     */
    toggleLabel: PropTypes.node,
    /**
     * The color of the background section and toggle.
     */
    color: PropTypes.string
};
//# sourceMappingURL=ToggleSection.js.map