import React from 'react';
import clsx from 'clsx';
import { alpha, Avatar, makeStyles, Typography } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        // padding: theme.spacing(1),
    },
    rootFlexGrow: {
        flexGrow: 1,
    },
    rootBlock: props => ({
        justifyContent: 'center',
        padding: theme.spacing(1),
    }),
    rootBlockDefault: props => ({
        backgroundColor: alpha(theme.palette.type === 'dark'
            ? theme.palette.common.black
            : theme.palette.common.white, 0.25),
    }),
    rootBlockError: props => ({
        backgroundColor: alpha(theme.palette.error.main, theme.palette.type === 'dark' ? 0.7 : 0.1),
    }),
    rootBlockSuccess: props => ({
        backgroundColor: alpha(theme.palette.success.main, theme.palette.type === 'dark' ? 0.2 : 0.3),
    }),
    labelRoot: {
        color: 'inherit',
        opacity: 0.6,
    },
    rootLabelError: (props) => ({
        color: theme.palette.error.main
    }),
    rootLabelSuccess: (props) => ({
        color: theme.palette.success.main
    }),
    valueRoot: {
        color: 'inherit',
        fontWeight: theme.typography.fontWeightMedium,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    beforeValue: {
        marginRight: theme.spacing(0.3),
    },
    afterValue: {},
    icon: {
        marginRight: theme.spacing(1),
    },
    iconAvatar: {
        backgroundColor: 'transparent',
    },
    content: props => ({
        display: 'flex',
        flexDirection: 'column',
        // alignItems: 'center',
        alignItems: props.icon ? 'left' : 'center',
    }),
}));
export const EntityHeaderStatListItem = props => {
    const { label = 'Label', value = 'Value', beforeValue, afterValue, flexGrow = false, labelColor, icon, } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: clsx({
            [classes.root]: true,
            [classes.rootFlexGrow]: flexGrow,
            [classes.rootBlock]: true,
            // [classes.rootBlockDefault]: !labelColor,
            // [classes.rootBlockError]: labelColor === 'error',
            // [classes.rootBlockSuccess]: labelColor === 'success',
        }) }, icon && (React.createElement("div", { className: classes.icon }, React.createElement(Avatar, { className: classes.iconAvatar }, icon))), React.createElement("div", { className: classes.content }, !!value && (React.createElement("div", { className: clsx({
            [classes.valueRoot]: true,
        }) }, beforeValue && (React.createElement(Typography, { variant: 'body1', className: classes.beforeValue }, beforeValue)), React.createElement(Typography, { variant: 'h5', className: clsx({
            [classes.rootLabelError]: labelColor === 'error',
            [classes.rootLabelSuccess]: labelColor === 'success'
        }) }, value), afterValue && (React.createElement(Typography, { variant: 'body1', className: classes.afterValue }, afterValue)))), !!label && (React.createElement(Typography, { variant: 'subtitle3', className: classes.labelRoot, component: "div" }, label)))));
};
//# sourceMappingURL=EntityHeaderStatListItem.js.map