import React from 'react';
import { Box, Card, CardContent, LinearProgress, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    paper: {
        width: '100%',
        height: '100%',
        position: 'relative',
    },
    styleWidth: {
        width: '75%',
    },
    media: {
        height: 120,
    },
    cardContent: {
        paddingTop: 0,
    },
    titleWrapper: {
        display: 'flex',
        backgroundColor: (props) => props.headerColor || theme.palette.background.paper,
        alignItems: 'center',
    },
    loading: {
        position: 'absolute',
        top: 0,
        left: 0,
    },
    expandMessage: {
        display: 'flex',
    },
    cardRoot: {
        '&:last-child': {
            paddingBottom: theme.spacing(10),
        },
    },
    title: {
        flex: 1,
    },
    visualization: {
        display: 'flex',
        alignItems: 'flex-end',
        width: '100%',
        height: 300,
    },
}));
/**
 * ContentDisplayCard
 *
 * @param {*} props
 * @return {*}
 */
export const ContentDisplayCard = (props) => {
    const { title, fullWidth, className, style, loading, headerElement, children } = props;
    const classes = useStyles(props);
    return (React.createElement(Card, { className: className, style: Object.assign({ border: 'none', boxShadow: 'none', borderRadius: 0, width: fullWidth ? '100%' : 'auto' }, style) }, title && (React.createElement(CardContent, { className: classes.titleWrapper, classes: { root: classes.cardRoot } }, React.createElement(Typography, { className: classes.title, component: "h2", variant: "h6" }, title), headerElement && headerElement)), loading && (React.createElement(Box, { sx: { width: '100%' } }, React.createElement(LinearProgress, null))), React.createElement(Box, { className: className }, children)));
};
ContentDisplayCard.propTypes = {
    title: PropTypes.string,
    fullWidth: PropTypes.bool,
    className: PropTypes.any,
    style: PropTypes.object,
    headerColor: PropTypes.string,
    loading: PropTypes.bool,
    headerElement: PropTypes.node,
    children: PropTypes.node.isRequired,
};
//# sourceMappingURL=ContentDisplayCard.js.map