import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, Divider, darken, alpha } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    root: props => ({
        display: 'flex',
        flexDirection: props.direction === 'column' ? 'column' : 'row',
    }),
    rootBgDark: props => ({
        backgroundColor: darken(props.color === 'primary'
            ? theme.palette.primary.main
            : theme.palette.secondary.main, 0.2),
        color: theme.palette.getContrastText(props.color === 'primary'
            ? theme.palette.primary.main
            : theme.palette.secondary.main),
    }),
    rootBgSoft: props => ({
        backgroundColor: alpha(props.color === 'primary'
            ? theme.palette.primary.main
            : theme.palette.secondary.main, 0.15),
    }),
    rootBgCustom: props => ({
        backgroundColor: props.background,
        color: props.color,
    }),
}));
export const EntityHeaderContainer = props => {
    const { children, showSeperator, background } = props;
    const arrayChildren = Children.toArray(children);
    const classes = useStyles(props);
    return (React.createElement("div", { className: clsx({
            [classes.root]: true, // always applies
            [classes.rootBg]: background === 'light' || !background, // if background = 'light'
            [classes.rootBgDark]: background === 'dark', // if background = 'dark'
            [classes.rootBgSoft]: background === 'soft', // if background = 'soft'
            [classes.rootBgCustom]: background &&
                background !== 'light' &&
                background !== 'dark' &&
                background !== 'soft',
        }) }, Children.map(arrayChildren, (child, index) => {
        const isLast = index === arrayChildren.length - 1;
        return (React.createElement(React.Fragment, null, cloneElement(child, {
            isLast,
        }), !isLast && showSeperator && (React.createElement(Divider, { orientation: "vertical", flexItem: true }))));
    })));
};
EntityHeaderContainer.propTypes = {
    children: PropTypes.node.isRequired,
    showSeperator: PropTypes.bool,
    background: PropTypes.oneOf(['light', 'dark', 'soft']),
    direction: PropTypes.oneOf(['row', 'column']),
    color: PropTypes.oneOf(['primary', 'secondary']),
};
EntityHeaderContainer.defaultProps = {
    showSeperator: true,
    background: 'light',
    direction: 'row',
    color: 'primary',
};
//# sourceMappingURL=EntityHeaderContainer.js.map