import React from 'react';
import { makeStyles, Typography, Divider, Box } from '@material-ui/core';
import { SummaryBlock } from '../../../dataDisplay/SummaryBlock';
import { MuiVegaLite } from '@material-vega/material-ui';
import { LayoutUnit } from '../../../../layout/LayoutUnit';
const useStyles = makeStyles((theme) => ({
    rootContainer: {
        background: '#FFFFFF',
        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.08)',
        borderRadius: '6px',
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column'
    },
    infoContainer: {
        display: 'flex',
        justifyContent: 'center',
        paddingLeft: theme.spacing(3)
    },
    divider: {
        width: '100%',
        height: '1px'
    },
    subContainer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
        width: '100%'
    },
    subContainerGraph: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'start',
        width: '100%'
    },
    graphContainer: {
        display: 'flex',
        paddingLeft: theme.spacing(3)
    }
}));
const defaultBlockSpecs = {
    alertType: 'default',
    value: '0',
    startLabel: '$',
    label: '',
    labelVariant: 'subtitle2',
    width: '100%',
    style: { border: 'none' }
};
/**
 * `AmbientSplitStatCard` component
 */
export const AmbientSplitStatCard = (props) => {
    const { title, subtitle, cardsSpecs, graphTitle, graphVariant, graphSpec, style } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: classes.rootContainer, style: style }, React.createElement("div", { className: classes.infoContainer }, React.createElement("div", { className: classes.subContainerGraph }, React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "h6", style: {
            fontStyle: 'normal',
            fontWeight: 500,
            fontSize: '19px'
        } }, title), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement(SummaryBlock, Object.assign({}, ((cardsSpecs === null || cardsSpecs === void 0 ? void 0 : cardsSpecs.SummaryBlockOne) || defaultBlockSpecs))), React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "subtitle2", style: { fontWeight: 400 } }, subtitle), React.createElement(LayoutUnit, { unit: "xxs" })), React.createElement(Divider, { orientation: "vertical" }), React.createElement("div", { className: classes.subContainer }, React.createElement(SummaryBlock, Object.assign({}, ((cardsSpecs === null || cardsSpecs === void 0 ? void 0 : cardsSpecs.SummaryBlockTwo) || defaultBlockSpecs))), React.createElement(Divider, { orientation: "horizontal", className: classes.divider }), React.createElement(SummaryBlock, Object.assign({}, ((cardsSpecs === null || cardsSpecs === void 0 ? void 0 : cardsSpecs.SummaryBlockThree) || defaultBlockSpecs))))), React.createElement(Divider, { orientation: "horizontal", className: classes.divider }), React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { className: classes.graphContainer }, React.createElement(Typography, { variant: "subtitle1" }, graphTitle), React.createElement(LayoutUnit, { unit: "nudge" })), React.createElement(Box, { clone: true, overflow: "hidden", sx: {
            width: '100%',
            minWidth: '100%',
            '& svg': {
                width: '100%'
            }
        } }, React.createElement(MuiVegaLite, { variant: graphVariant || 'verticalBarChart', background: "paper", autoResize: true, actions: false, spec: graphSpec })), React.createElement(LayoutUnit, { unit: "xxs" })));
};
//# sourceMappingURL=AmbientSplitStatCard.js.map