import React, { useState } from 'react';
import { ChevronDownIcon } from '@fluentui/react-icons';
import { Card, CardContent, Typography, makeStyles, Collapse, Avatar } from '@material-ui/core';
import clsx from 'clsx';
import { Adornment } from '../../components/feedback/Adornment';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { StatusChip } from '../../dataDisplay/status/StatusChip';
import { CompactDataList } from '../../dataDisplay/CompactDataList';
import { CompactDataListItem } from '../../dataDisplay/CompactDataListItem';
import { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';
const useStyles = makeStyles((theme) => ({
    titleWrapper: {
        display: 'flex',
        justifyContent: 'space-between',
        gap: theme.spacing(1)
    },
    subtitleWrapper: {
        display: 'flex',
        paddingBottom: 0,
        alignItems: 'center',
        gap: theme.spacing(1)
    },
    title: {
        flex: 1,
        lineHeight: '125%'
    },
    expand: {
        transform: 'rotate(0deg)',
        transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest
        })
    },
    expandOpen: {
        transform: 'rotate(180deg)'
    },
    expandButtonWrapper: {
        display: 'flex',
        justifyContent: 'space-between'
    },
    sectionWrapper: {
        marginTop: theme.spacing(1.5)
    },
    iconButtonWrapper: {
        borderRadius: 2
    },
    avatar: {
        width: '80px',
        height: '80px'
    },
    contentWrapper: {
        flex: 2
    },
    secondaryText: {
        color: 'inherit',
        opacity: 0.6
    },
    cardContent: {
        flex: 1,
        paddingTop: 0,
        '&:last-child': {
            paddingBottom: theme.spacing(2)
        }
    }
}));
export const CompactCard = (props) => {
    const { title, primaryText, secondaryText, noWrap = false, extendedList = [], status = 'info', statusLabel, statusVariant, showAdornment = true, avatar, imageAvatarSrc, overrideStatusError, overrideStatusInfo, overrideStatusSuccess, overrideStatusWarning, iconButtons = [], children } = props;
    const [expanded, setExpanded] = useState(false);
    const classes = useStyles();
    return (React.createElement("div", { style: { display: 'flex', height: '100%', width: '100%' } }, showAdornment && status && (React.createElement("div", { style: { height: '100%' } }, React.createElement(Adornment, { color: status }))), React.createElement(Card, { style: { width: '100%' } }, React.createElement(CardContent, { className: classes.subtitleWrapper }, imageAvatarSrc && (React.createElement(Avatar, { variant: "square", className: classes.avatar, src: imageAvatarSrc })), avatar && (React.createElement(Avatar, { variant: "square", className: classes.avatar }, avatar)), React.createElement("div", { className: classes.contentWrapper }, React.createElement("div", { className: classes.titleWrapper }, React.createElement(Typography, { variant: "subtitle1" }, title), status && statusLabel && (React.createElement(StatusChip, { status: status, label: statusLabel, success: overrideStatusSuccess, error: overrideStatusError, warning: overrideStatusWarning, info: overrideStatusInfo, variant: statusVariant }))), React.createElement(Typography, { variant: "body2", noWrap: noWrap }, primaryText), React.createElement(Typography, { variant: "body2", className: classes.secondaryText }, secondaryText))), children, ((extendedList === null || extendedList === void 0 ? void 0 : extendedList.length) > 0 || (iconButtons === null || iconButtons === void 0 ? void 0 : iconButtons.length) > 0) && (React.createElement(CardContent, { className: classes.cardContent }, React.createElement("div", { className: classes.sectionWrapper }, React.createElement(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true }, React.createElement(CompactDataList, { disableSeparator: false }, extendedList === null || extendedList === void 0 ? void 0 : extendedList.map((item) => (React.createElement(CompactDataListItem, { label: item === null || item === void 0 ? void 0 : item.label, value: item === null || item === void 0 ? void 0 : item.value }))))), React.createElement("div", { className: classes.expandButtonWrapper }, React.createElement("div", null, (extendedList === null || extendedList === void 0 ? void 0 : extendedList.length) > 0 && (React.createElement(FluentIconButton, { className: clsx(classes.expand, {
            [classes.expandOpen]: expanded
        }, classes.iconButtonWrapper), onClick: () => setExpanded(!expanded), icon: ChevronDownIcon }))), React.createElement("div", null, (iconButtons === null || iconButtons === void 0 ? void 0 : iconButtons.length) > 0 &&
        (iconButtons === null || iconButtons === void 0 ? void 0 : iconButtons.map((iconButton) => (React.createElement(IconButtonWithTooltip, Object.assign({ className: classes.iconButtonWrapper, icon: iconButton === null || iconButton === void 0 ? void 0 : iconButton.icon, onClick: iconButton === null || iconButton === void 0 ? void 0 : iconButton.onclick, title: iconButton === null || iconButton === void 0 ? void 0 : iconButton.title, size: "small" }, iconButton)))))))))))));
};
//# sourceMappingURL=CompactCard.js.map