import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CaretDownSolid8Icon, ChromeCloseIcon, CompletedIcon, ErrorIcon, InfoIcon, MoreVerticalIcon, ViewIcon, WarningIcon } from '@fluentui/react-icons';
import { Card, CardContent, darken, IconButton, lighten, ListItemIcon, makeStyles, Menu, MenuItem, Tooltip, Typography, useTheme } from '@material-ui/core';
import { Adornment } from '../../components/feedback/Adornment';
import { FluentButton } from '../../inputs/buttons/FluentButton';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { CompactDataList } from '../../dataDisplay/CompactDataList';
import { CompactDataListItem } from '../../dataDisplay/CompactDataListItem';
const useStyles = makeStyles((theme) => ({
    contentWrapper: {
        display: 'flex',
        height: '100%',
        width: (props) => {
            var _a;
            return (_a = props === null || props === void 0 ? void 0 : props.width) !== null && _a !== void 0 ? _a : '100%';
        }
    },
    titleWrapper: {
        display: 'flex',
        gap: theme.spacing(1),
        alignItems: 'center'
    },
    iconButtonWrapper: {
        borderRadius: 2
    },
    avatar: {
        width: '80px',
        height: '80px'
    },
    iconButtonsWrapper: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    primaryButtonContainer: {
        display: 'flex',
        justifyContent: 'flex-end',
        gap: theme.spacing(1)
    },
    actionButton: {
        color: '#FFFFFF'
    },
    fullHeight: {
        height: '100%'
    },
    fullWidth: {
        width: '100%'
    },
    messageWrapper: {
        display: 'flex',
        gap: theme.spacing(1),
        alignItems: 'center',
        padding: theme.spacing(1),
        backgroundColor: (props) => {
            var _a;
            return (props === null || props === void 0 ? void 0 : props.status)
                ? lighten((_a = theme.palette[props.status]) === null || _a === void 0 ? void 0 : _a.main, 0.9)
                : lighten(theme.palette.info.main, 0.9);
        }
    },
    iconMessage: {
        color: (props) => {
            var _a;
            return ((props === null || props === void 0 ? void 0 : props.status) ? (_a = theme.palette[props.status]) === null || _a === void 0 ? void 0 : _a.main : null);
        }
    },
    message: {
        color: (props) => {
            var _a;
            return (props === null || props === void 0 ? void 0 : props.status) ? darken((_a = theme.palette[props.status]) === null || _a === void 0 ? void 0 : _a.main, 0.6) : null;
        }
    },
}));
export const PopoverCard = (props) => {
    var _a;
    const { data, title, listData, showAdornment = true, status = 'info', detailsEvent, primaryActions, moreIconActions, message, messageIcon, hideMessageIcon = false, onClose, width } = props;
    const [moreIconAnchor, setMoreIconAnchor] = useState(null);
    const [primaryActionAnchor, setPrimaryActionAnchor] = useState(null);
    const { t } = useTranslation();
    const classes = useStyles({ width, status });
    const theme = useTheme();
    const handleOnClickMoreIcon = (event) => {
        setMoreIconAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
    };
    const handleOnClickPrimaryAction = (event) => {
        setPrimaryActionAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
    };
    const headerBackgroundColor = useMemo(() => {
        switch (status) {
            case 'success':
                return lighten(theme.palette.success.main, 0.7);
            case 'error':
                return lighten(theme.palette.error.main, 0.7);
            case 'warning':
                return lighten(theme.palette.warning.main, 0.7);
            default:
                return lighten(theme.palette.info.main, 0.7);
        }
    }, [status, theme]);
    const defaultMessageIcon = useMemo(() => {
        switch (status) {
            case 'success':
                return CompletedIcon;
            case 'error':
                return ErrorIcon;
            case 'warning':
                return WarningIcon;
            default:
                return InfoIcon;
        }
    }, [status]);
    return (React.createElement("div", null, React.createElement("div", { className: classes.contentWrapper }, showAdornment && status && (React.createElement("div", null, React.createElement(Adornment, { color: status }))), React.createElement(Card, { className: classes.fullWidth }, React.createElement(CardContent, { style: { backgroundColor: headerBackgroundColor } }, React.createElement("div", { className: classes.iconButtonsWrapper }, React.createElement("div", { className: classes.titleWrapper }, React.createElement(FluentIconButton, { onClick: onClose, icon: ChromeCloseIcon }), React.createElement(Typography, { variant: "h6" }, title)), React.createElement("div", null, (moreIconActions === null || moreIconActions === void 0 ? void 0 : moreIconActions.length) > 0 && (React.createElement(React.Fragment, null, React.createElement(Tooltip, { title: (_a = t('More')) !== null && _a !== void 0 ? _a : '' }, React.createElement(IconButton, { className: classes.iconButtonWrapper, onClick: handleOnClickMoreIcon, size: "small" }, React.createElement(MoreVerticalIcon, null))), React.createElement(Menu, { open: moreIconAnchor ? true : false, onClose: () => {
            setMoreIconAnchor(null);
        }, anchorEl: moreIconAnchor, anchorOrigin: {
            vertical: 'top',
            horizontal: 'right'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
        } }, moreIconActions === null || moreIconActions === void 0 ? void 0 : moreIconActions.map((action) => (React.createElement(MenuItem, { onClick: () => { action.onClick(data); } }, (action === null || action === void 0 ? void 0 : action.icon) && (React.createElement(ListItemIcon, null, action.icon)), action === null || action === void 0 ? void 0 : action.name))))))))), message && (React.createElement("div", { className: classes.messageWrapper }, !hideMessageIcon && (React.createElement("div", { className: classes.iconMessage }, React.createElement(FluentIcon, { component: messageIcon !== null && messageIcon !== void 0 ? messageIcon : defaultMessageIcon }))), React.createElement("div", { className: classes.message }, message))), React.createElement(CardContent, { style: { flex: 1 } }, React.createElement(CompactDataList, { disableSeparator: false }, listData === null || listData === void 0 ? void 0 : listData.map(({ subject, value }) => {
        return React.createElement(CompactDataListItem, { label: subject, value: value });
    }))), React.createElement(CardContent, { style: { flex: 1, paddingTop: 0, paddingBottom: 16 } }, React.createElement("div", { className: classes.primaryButtonContainer }, detailsEvent && (React.createElement(FluentButton, { variant: "outlined", endIcon: React.createElement(ViewIcon, null), onClick: detailsEvent }, t('Details'))), React.createElement("div", null, (primaryActions === null || primaryActions === void 0 ? void 0 : primaryActions.length) > 0 && (React.createElement(FluentButton, { variant: "contained", color: "secondary", endIcon: React.createElement(CaretDownSolid8Icon, null), onClick: handleOnClickPrimaryAction, className: classes.actionButton }, t('Actions'))), React.createElement(Menu, { open: primaryActionAnchor ? true : false, onClose: () => {
            setPrimaryActionAnchor(null);
        }, anchorEl: primaryActionAnchor, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
        } }, primaryActions === null || primaryActions === void 0 ? void 0 : primaryActions.map((action) => (React.createElement(MenuItem, { onClick: () => { action.onClick(data); } }, (action === null || action === void 0 ? void 0 : action.icon) && (React.createElement(ListItemIcon, null, action.icon)), action === null || action === void 0 ? void 0 : action.name)))))))))));
};
//# sourceMappingURL=PopoverCard.js.map