import { ErrorIcon } from '@fluentui/react-icons';
import { Typography, makeStyles, Box } from '@material-ui/core';
import React from 'react';
import PropTypes from 'prop-types';
import { FluentButton } from '../inputs/buttons/FluentButton';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { LayoutUnit } from '../../layout/LayoutUnit';
const useStyles = makeStyles(theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        width: '100%',
    },
    secondaryText: {
        color: theme.palette.text.secondary,
    },
    image: {
        width: props => props === null || props === void 0 ? void 0 : props.imageWidth,
    },
}));
export const EmptyStateDisplay = props => {
    const { icon, iconSize = 48, customIconSize = true, imageSrc, imageWidth = '100px', primaryText, secondaryText, actionLabel, action, } = props;
    const classes = useStyles({ imageWidth });
    return (React.createElement("div", { className: classes.container }, imageSrc ? (React.createElement("img", { src: imageSrc, alt: "logo", className: classes.image })) : (React.createElement(FluentIcon, { component: icon !== null && icon !== void 0 ? icon : ErrorIcon, size: iconSize, customSize: customIconSize })), React.createElement(LayoutUnit, { unit: "xxs" }), primaryText && (React.createElement("div", null, React.createElement(Typography, { variant: "subtitle2", align: "center" }, primaryText))), secondaryText && (React.createElement("div", null, React.createElement(Typography, { className: classes.secondaryText, align: "center" }, secondaryText))), (primaryText || secondaryText) && React.createElement(LayoutUnit, { unit: "xxs" }), action && (React.createElement("div", { className: primaryText || secondaryText ? classes.buttonWrapper : '' }, React.createElement(FluentButton, { onClick: action, variant: "outlined", color: "secondary", id: 'udpRecord-EmptyStateDisplay-' +
            primaryText.replace(/\s+/g, '') +
            '-' +
            actionLabel.replace(/\s+/g, ''), udprecordid: 'udpRecord-EmptyStateDisplay-' +
            primaryText.replace(/\s+/g, '') +
            '-' +
            actionLabel.replace(/\s+/g, '') }, actionLabel)))));
};
EmptyStateDisplay.propTypes = {
    icon: PropTypes.elementType,
    iconSize: PropTypes.number,
    customIconSize: PropTypes.bool,
    imageSrc: PropTypes.string,
    imageWidth: PropTypes.string,
    primaryText: PropTypes.string,
    secondaryText: PropTypes.string,
    actionLabel: PropTypes.string,
    action: PropTypes.func
};
EmptyStateDisplay.defaultProps = {
    iconSize: 48,
    customIconSize: true,
    imageWidth: '100px'
};
//# sourceMappingURL=EmptyStateDisplay.js.map