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 { DeleteIcon } from '@fluentui/react-icons';
import { makeStyles, CircularProgress, lighten } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import FUICard, { FUICardHeaderMenu } from '../UI/surfaces/cards/fluentCards/FUICard';
import FUIMenuItem from '../UI/widgets/FluentComponents/FUIMenuItem';
/**
 * Core component for dashboard widget cards
 */
export const WidgetCard = (props) => {
    const { children, headerActions, className, widgetType, id, layout, params, setParam, onDelete, loading, errors, theme, hideWidgetName, innerPadding, contentHeight, contentMaxHeight } = props, other = __rest(props, ["children", "headerActions", "className", "widgetType", "id", "layout", "params", "setParam", "onDelete", "loading", "errors", "theme", "hideWidgetName", "innerPadding", "contentHeight", "contentMaxHeight"]);
    const useStyles = makeStyles((theme) => ({
        root: {
            '&.react-resizable-hide .react-resizable-handle': {
                display: 'none'
            }
        },
        darkRoot: {
            '&.react-resizable-hide .react-resizable-handle': {
                display: 'none'
            },
            background: '#424242',
            color: 'white'
        },
        anyRoot: {
            '& .MuiCardContent-root': {
                justifyContent: 'space-between',
                overflow: 'auto',
                padding: 0
            }
        },
        handle: {
            cursor: 'move',
            '&:hover': {
                backgroundColor: theme.palette.action.hover
            },
            display: hideWidgetName && 'none'
        },
        loadingContent: {
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
        },
        innerWidgetContentContainer: {
            height: widgetType === 'TransformerLoadWidget'
                ? 'auto'
                : contentHeight
                    ? contentHeight
                    : '100%',
            maxHeight: contentMaxHeight ? contentMaxHeight : '',
            minWidth: widgetType === 'ProgressBarWidget' ? 0 : 270,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            padding: innerPadding ||
                (widgetType === 'VEERegisterRead' ? 0 : theme.spacing(2))
        }
    }));
    const classes = useStyles();
    const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className !== null && className !== void 0 ? className : '');
    let body = children;
    if (loading && !body) {
        body = (React.createElement("div", { className: classes.loadingContent }, React.createElement(CircularProgress, { size: 64 })));
    }
    if (errors && !body) {
        body = React.createElement("div", null, "Unexpected error");
    }
    return (React.createElement(FUICard, Object.assign({}, other, { className: clsx(className, theme === 'dark' ? classes.darkRoot : classes.root, classes.anyRoot), raised: raised, CardHeaderProps: {
            className: classes.handle,
            'data-handle': true
        }, headerActions: React.createElement(React.Fragment, null, headerActions, React.createElement(FUICardHeaderMenu, null, React.createElement(FUIMenuItem, { onClick: onDelete, fluentIcon: DeleteIcon, primary: "Delete" }))) }), React.createElement("div", { className: classes.innerWidgetContentContainer }, body)));
};
//# sourceMappingURL=WidgetCard.js.map