var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { makeStyles } from '@material-ui/core';
import { MuiVegaLite } from '@material-vega/material-ui';
import { PropTypes } from 'prop-types';
import { AmbientCard } from '../../surfaces/cards/AmbientCard';
import { EmptyStateDisplay } from '../EmptyStateDisplay';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    infoPanel: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        alignSelf: 'stretch',
        padding: '10px 32px'
    },
    graphSection: {
        overflow: 'hidden',
        '& svg': {
            width: '100%',
            height: '100%'
        },
        '& .vega-embed': {
            width: '100%',
            height: '100%'
        },
        paddingTop: theme.spacing(1),
        margin: 0,
        height: (props) => {
            var _a;
            return (_a = props === null || props === void 0 ? void 0 : props.graphHeight) !== null && _a !== void 0 ? _a : '255px';
        }
    },
    emptyStateDisplay: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    }
}));
/**
 * `GraphCard` component
 */
export const GraphCard = (props) => {
    const { title, showInfoPanel = true, graphSpecs, children, headerColor, className, noData = false, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon } = props, otherProps = __rest(props, ["title", "showInfoPanel", "graphSpecs", "children", "headerColor", "className", "noData", "emptyStatePrimaryText", "emptyStateImageSrc", "emptyStateIconSize", "emptyStateImageWidth", "emptyStateClassName", "emptyStateIcon"]);
    const classes = useStyles(props);
    const { t } = useTranslation();
    return (React.createElement(AmbientCard, Object.assign({ fullWidth: true, title: title, headerColor: headerColor }, otherProps), !noData ? (React.createElement("div", null, showInfoPanel && React.createElement("div", { className: classes.infoPanel }, children), React.createElement("div", { className: classes.graphSection }, React.createElement(MuiVegaLite, { variant: "verticalBarChart", background: "paper", autoResize: true, actions: false, spec: graphSpecs || {} })))) : (React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, React.createElement(EmptyStateDisplay, { primaryText: emptyStatePrimaryText !== null && emptyStatePrimaryText !== void 0 ? emptyStatePrimaryText : t('No results found'), icon: emptyStateIcon, iconSize: emptyStateIconSize, imageSrc: emptyStateImageSrc, imageWidth: emptyStateImageWidth })))));
};
GraphCard.propTypes = {
    /**
     * Optional, card title
     */
    title: PropTypes.string,
    /**
     * @type {?object}
     {
       graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html
      }
     */
    graphSpecs: PropTypes.object.isRequired,
    /**
     * Optional, hide or show the top panel
     */
    showInfoPanel: PropTypes.bool,
    /**
     * Optional, content for the info panel behind the graph
     */
    children: PropTypes.node,
    /**
     * Optional, additional properties to apply some styles over the main container
     */
    style: PropTypes.object
};
//# sourceMappingURL=GraphCard.js.map