import React from 'react';
import { makeStyles, useTheme, Typography, Box, List as MuiList, ListItem, ListItemText, Divider, ListItemAvatar, Avatar, ListItemIcon } from '@material-ui/core';
import { ErrorIcon } from '@fluentui/react-icons';
import { StatusChip } from './status/StatusChip';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { LayoutUnit } from '../../layout/LayoutUnit';
import clsx from 'clsx';
import { EmptyStateDisplay } from './EmptyStateDisplay';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    avatar: {
        backgroundColor: theme.palette.secondary.light,
        color: theme.palette.getContrastText(theme.palette.secondary.light)
    },
    denseAvatar: {
        width: theme.spacing(3.75),
        height: theme.spacing(3.75),
        margin: '4px 0px'
    },
    list: {
        width: '100%',
        backgroundColor: theme.palette.background.paper,
        padding: '0px',
        maxHeight: (props) => (props === null || props === void 0 ? void 0 : props.maxHeight) || 343,
        overflow: 'auto',
        height: (props) => props === null || props === void 0 ? void 0 : props.listHeight
    },
    listItem: {
        padding: '0px 15px'
    },
    status: {
        marginLeft: theme.spacing(1)
    },
    noDataMessage: {
        height: (props) => props === null || props === void 0 ? void 0 : props.noDataHeight,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '10px'
    }
}));
const DefaultFieldConfig = {
    primaryText: 'primaryText',
    secondaryText: 'secondaryText'
};
export const AmbientList = (props) => {
    const theme = useTheme();
    const classes = useStyles(props);
    const { data, useAvatar = true, getItemIcon = () => { }, getItemStatus = () => { }, onItemClick = () => { }, fieldConfig = DefaultFieldConfig, noDataMessage = 'No data available' } = props;
    if (!data || data.length === 0) {
        return (React.createElement(React.Fragment, null, React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(EmptyStateDisplay, { icon: ErrorIcon, primaryText: noDataMessage }), React.createElement(LayoutUnit, { unit: "xxs" })));
    }
    return (React.createElement(MuiList, { className: classes === null || classes === void 0 ? void 0 : classes.list }, data === null || data === void 0 ? void 0 : data.map((item, index) => {
        var _a;
        const status = getItemStatus(item);
        const icon = getItemIcon(item);
        return (React.createElement(React.Fragment, null, React.createElement(ListItem, { button: true, className: classes.listItem, onClick: () => onItemClick(item) }, useAvatar && icon ? (React.createElement(ListItemAvatar, null, React.createElement(Avatar, { className: clsx(classes.avatar, {
                [classes.denseAvatar]: !(item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.primaryText]) ||
                    !(item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.secondaryText])
            }), sizes: "large" }, React.createElement(FluentIcon, { component: icon, size: "small" })))) : (React.createElement("div", null, icon && (React.createElement(ListItemIcon, null, React.createElement(FluentIcon, { component: icon, size: !(item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.primaryText]) ||
                !(item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.secondaryText])
                ? 'medium'
                : 'large', color: theme.palette.secondary.main }))))), React.createElement(ListItemText, { primary: item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.primaryText], secondary: item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.secondaryText], primaryTypographyProps: {
                variant: 'body2',
                color: 'textPrimary'
            }, secondaryTypographyProps: {
                variant: 'body1',
                color: 'textSecondary'
            } }), React.createElement(ListItemText, { disableTypography: true }, React.createElement(Typography, { align: "right" }, item === null || item === void 0 ? void 0 : item[fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.subText])), (status === null || status === void 0 ? void 0 : status.label) && (React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-end", className: classes.status }, React.createElement(StatusChip, { status: (_a = status === null || status === void 0 ? void 0 : status.status) !== null && _a !== void 0 ? _a : 'info', label: status === null || status === void 0 ? void 0 : status.label })))), React.createElement(Divider, null)));
    })));
};
AmbientList.propTypes = {
    data: PropTypes.arrayOf(PropTypes.object),
    useAvatar: PropTypes.bool,
    getItemIcon: PropTypes.func,
    getItemStatus: PropTypes.func,
    onItemClick: PropTypes.func,
    fieldConfig: PropTypes.shape({
        primaryText: PropTypes.string,
        secondaryText: PropTypes.string,
        subText: PropTypes.string
    }),
    noDataMessage: PropTypes.string,
    maxHeight: PropTypes.number,
    listHeight: PropTypes.string,
    noDataHeight: PropTypes.string
};
//# sourceMappingURL=AmbientList.js.map