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, { useState } from 'react';
import { Paper, CardContent, makeStyles, Typography, CardMedia, lighten, Collapse } from '@material-ui/core';
import { LayoutUnit } from '../../../../layout/LayoutUnit';
import { StatusChip } from '../../../dataDisplay/status/StatusChip';
import { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons';
import { FluentButton } from '../../../inputs/buttons/FluentButton';
import { FluentIconButton } from '../../../inputs/buttons/FluentIconButton';
import { AmbientCardButton } from '../../../inputs/buttons/AmbientCardButton';
import { Adornment } from '../../../components/feedback/Adornment';
import { getEllipseColor } from '../../../../utilities/style/colorConverter';
const useStyles = makeStyles((theme) => ({
    root: {},
    paper: {
        width: '100%',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        height: (props) => {
            var _a;
            return (_a = props === null || props === void 0 ? void 0 : props.cardHeight) !== null && _a !== void 0 ? _a : '';
        }
    },
    adornment: {
        top: 0,
        left: 0,
        height: '100%',
        position: 'absolute'
    },
    launchButtons: {
        // position: (props) => !props.extendedContent && 'absolute',
        // marginTop: 'auto',
        padding: theme.spacing(0, 2, 2, 2),
        display: 'flex',
        justifyContent: 'flex-end',
        bottom: (props) => (props.adjustBaseline ? props.adjustBaseline : 16),
        right: theme.spacing(2),
        gridGap: theme.spacing(1)
    },
    moreButton: {
        marginTop: theme.spacing(1),
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: lighten(theme.palette.secondary.main, 0.9),
        padding: theme.spacing(1)
    },
    styleWidth: {
        width: (props) => (!(props === null || props === void 0 ? void 0 : props.fullWidth) ? '75%' : '100%'),
        height: '100%'
    },
    media: {
        height: (props) => props.mediaHeight || 120
    },
    cardContent: {
        // backgroundColor: 'red',
        flexGrow: 1,
        padding: (props) => props.removePadding && 0,
        '&:last-child': {
            paddingBottom: (props) => props.lastChildBottomPadding
                ? props.lastChildBottomPadding
                : theme.spacing(2)
        },
        paddingTop: 0,
        height: (props) => (props.cardContentHeight ? props.cardContentHeight : '')
    },
    titleWrapper: {
        display: 'flex',
        backgroundColor: (props) => props.headerColor && getEllipseColor(theme, props.headerColor, 'light')
    },
    title: {
        color: (props) => props.headerColor &&
            theme.palette.getContrastText(getEllipseColor(theme, props.headerColor, 'light'))
    },
    loading: {
        position: 'absolute',
        top: 0,
        left: 0
    },
    expandMessage: {
        display: 'flex'
    },
    cardRoot: {
        '&:last-child': {
            paddingBottom: theme.spacing(2)
        }
    },
    visualization: {
        display: 'flex',
        alignItems: 'flex-end',
        width: '100%',
        height: 300
    },
    titlesWrapper: {
        display: 'flex',
        flexDirection: 'column',
        flex: 1,
        lineHeight: (props) => props.globalExpanded && '125%'
    },
    collapseChildren: {
        flexGrow: 1,
        '& .MuiCollapse-wrapper': {
            height: '100%'
        },
        '& .MuiCollapse-wrapperInner': {
            height: '100%'
        },
        height: (props) => (props.cardContentHeight ? props.cardContentHeight : '')
    }
}));
export const AmbientCard = (props) => {
    const classes = useStyles(props);
    const [expanded, setExpanded] = useState(false);
    const { adornment = 'secondary', ariaLabel, baseLoading, cardHeight, children, collapseChildrenWhenExpanded, customAdornment = ' ', deleteEvent, deleteOption, editEvent, editOption, extendedContent, extendedList, fullWidth, globalToggle, header, image, imageTitle, label, large, launchEvent, launchOption, loading, mediaHeight, more, moreMessage, moreButton, moreButtonExpanded, noAdornment = false, overrideStatusSuccess, overrideStatusError, overrideStatusWarning, overrideStatusInfo, removeTopLayoutUnit, status, subCard, title, toggleGlobalExpanded = true, visualization, subtitle } = props, otherProps = __rest(props, ["adornment", "ariaLabel", "baseLoading", "cardHeight", "children", "collapseChildrenWhenExpanded", "customAdornment", "deleteEvent", "deleteOption", "editEvent", "editOption", "extendedContent", "extendedList", "fullWidth", "globalToggle", "header", "image", "imageTitle", "label", "large", "launchEvent", "launchOption", "loading", "mediaHeight", "more", "moreMessage", "moreButton", "moreButtonExpanded", "noAdornment", "overrideStatusSuccess", "overrideStatusError", "overrideStatusWarning", "overrideStatusInfo", "removeTopLayoutUnit", "status", "subCard", "title", "toggleGlobalExpanded", "visualization", "subtitle"]);
    const [globalExpanded, setGlobalExpanded] = useState(toggleGlobalExpanded);
    if (baseLoading)
        return null;
    return (React.createElement(Paper, { elevation: 0, 
        // className={clsx(classes.paper, adornment && classes.adornment)}
        className: classes.paper }, !noAdornment && (React.createElement("div", { className: classes.adornment }, customAdornment ? customAdornment : React.createElement(Adornment, { color: adornment }))), title && (React.createElement(CardContent, { className: classes.titleWrapper, classes: { root: classes.cardRoot } }, React.createElement("div", { className: classes.titlesWrapper }, React.createElement(Typography, { className: classes.title, component: "h2", variant: subCard ? 'subtitle2' : 'h6' }, title), subtitle && (React.createElement(Typography, { variant: 'body1', className: classes.title }, subtitle))), status && (React.createElement(StatusChip, { status: status, label: label, success: overrideStatusSuccess, error: overrideStatusError, warning: overrideStatusWarning, info: overrideStatusInfo })), globalToggle && (React.createElement("div", null, React.createElement(FluentIconButton, { onClick: () => setGlobalExpanded(!globalExpanded), icon: globalExpanded ? ChevronUpIcon : ChevronDownIcon, className: classes.icon, id: 'udpRecord-AmbientCard-Toggle-' +
            (globalExpanded ? 'Up' : 'Down'), udprecordid: 'udpRecord-AmbientCard-Toggle-' +
            (globalExpanded ? 'Up' : 'Down') }))))), image && (React.createElement(CardMedia, { className: classes.media, image: image, title: imageTitle })), globalExpanded && (React.createElement(CardContent, { classes: { root: classes.cardContent } }, !image && !header && !removeTopLayoutUnit && (React.createElement(LayoutUnit, { unit: large ? 'md' : 'xxs' })), image && React.createElement(LayoutUnit, { unit: "xs" }), React.createElement(Collapse, { in: !collapseChildrenWhenExpanded || !expanded, timeout: "auto", className: classes.collapseChildren }, React.createElement("div", { className: classes.styleWidth }, children)), extendedList && (React.createElement(Collapse, { in: expanded, timeout: "auto" }, React.createElement("div", null, extendedList))), more && (React.createElement("div", { className: classes.moreButton }, React.createElement("div", { className: classes.expandMessage }, React.createElement(Typography, { style: { marginTop: 4, marginRight: 16 }, variant: "subtitle2" }, !expanded && moreMessage), React.createElement(FluentButton, { onClick: () => setExpanded(!expanded), color: "secondary", variant: "outlined" }, expanded ? moreButtonExpanded : moreButton)))))), visualization && (React.createElement("div", { className: classes.visualization }, visualization)), !globalToggle && (editOption || launchOption || deleteOption) && (React.createElement("div", { className: classes.launchButtons }, editOption && (React.createElement(AmbientCardButton, Object.assign({ "aria-label": ariaLabel, editOption: true }, otherProps, { onClick: editEvent, id: "udpRecord-AmbientCard-edit", udprecordid: "udpRecord-AmbientCard-edit" }))), launchOption && (React.createElement(AmbientCardButton, Object.assign({ "aria-label": ariaLabel, launchOption: true }, otherProps, { onClick: launchEvent, id: "udpRecord-AmbientCard-launch", udprecordid: "udpRecord-AmbientCard-launch" }))), deleteOption && (React.createElement(AmbientCardButton, Object.assign({ "aria-label": ariaLabel, deleteOption: true }, otherProps, { onClick: deleteEvent, id: "udpRecord-AmbientCard-delete", udprecordid: "udpRecord-AmbientCard-delete" })))))));
};
//# sourceMappingURL=AmbientCard.js.map