import React, { useState } from 'react';
import { makeStyles, Collapse, useTheme } from '@material-ui/core';
import { ExtenderToggle } from '../templates/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 ? props.color : theme.palette.secondary.main
    },
    compactContainer: {
        padding: 1
    },
    lowerShelf: {
        display: 'flex',
        borderTop: (props) => `1px solid ${props.color ? props.color : theme.palette.secondary.main}`
    },
    lowerShelfCompact: {
        display: 'flex'
    },
    shelfOptions: {
        flex: 1,
        width: '100%'
    }
}));
export const HeaderExpander = (props) => {
    const classes = useStyles(props);
    const { children, options, toggleLabel, color, compact } = props;
    const [extendedHeader, setExtendedHeader] = useState(true);
    const toggleExpandedHeader = () => {
        setExtendedHeader(!extendedHeader);
    };
    const theme = useTheme();
    return (React.createElement("div", { className: classes.root }, React.createElement(Collapse, { in: extendedHeader }, React.createElement("div", { className: compact ? classes.compactContainer : classes.container }, ' ', children, ' ')), React.createElement("div", { className: compact ? classes.lowerShelfCompact : classes.lowerShelf }, React.createElement("div", { className: classes.shelfOptions }, options), React.createElement("div", null, React.createElement(ExtenderToggle, { onClick: toggleExpandedHeader, open: extendedHeader, toggleLabel: toggleLabel, color: color ? color : theme.palette.secondary.main, compact: compact })))));
};
HeaderExpander.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=HeaderExpander.js.map