import React, { useState } from 'react';
import { useItemSubCard } from '../../hooks/useItemSubCard';
import { Box, Divider, Fade, Grow, IconButton, List, ListItem, ListItemAvatar, ListItemText, makeStyles, Typography, useTheme, } from '@material-ui/core';
import { DateTime } from 'luxon';
import { grey } from '@material-ui/core/colors';
import { AmbientCardTitle } from '../surfaces/cards/AmbientCard/AmbientCardTitle';
import { PropTypes } from 'prop-types';
import KeyboardArrowLeftIcon from '@material-ui/icons/esm/KeyboardArrowLeft';
import { getEllipseColor } from '../../utilities/style/colorConverter';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import { EmptyStateDisplay } from '../dataDisplay/EmptyStateDisplay';
const useStyles = makeStyles((theme) => ({
    mainContainer: {
        backgroundColor: theme.palette.background.paper,
        padding: '0px',
        gap: '0px',
        order: 3,
        alignSelf: 'stretch',
    },
    secondaryContainer: {
        backgroundColor: theme.palette.background.paper,
        padding: '0px',
        gap: '0px',
        order: 0,
        alignSelf: 'stretch',
        flexGrow: 0,
        width: '100%',
    },
    listItemPrimary: {
        fontSize: '14px',
        fontWeight: 600,
    },
    listItemSecondary: {
        fontSize: '12px',
        fontWeight: 400,
        color: grey[500],
    },
    listContainer: {
        width: '100%',
        backgroundColor: theme.palette.background.paper,
        padding: '0px',
    },
    listItem: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        padding: '8px 16px',
    },
    listItemAvatar: {
        minWidth: '32px',
    },
    listItemText: {
        margin: 0,
    },
    itemContainer: {
        paddingRight: '5px',
    },
    emptyStateDisplay: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
}));
/**
 * `ItemsWidgetCard` component
 */
export const ItemsWidgetCard = (props) => {
    const [checked, setChecked] = useState(false);
    const [cardItemData, setCardItemData] = useState();
    const { cardData, subCardsList = {}, style, headerColor, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon, title = 'Account Items', subCardTypeField = 'type', } = props;
    const { SubCard, setSubCardType, subCardType, getSubCardInfo } = useItemSubCard(subCardsList);
    const classes = useStyles();
    const theme = useTheme();
    const { t } = useTranslation();
    const handleChange = (accountItem) => {
        setCardItemData(accountItem);
        setSubCardType((accountItem === null || accountItem === void 0 ? void 0 : accountItem[subCardTypeField]) || '');
        setChecked((prev) => !prev);
    };
    return (React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", flexGrow: "1", className: classes.mainContainer, style: Object.assign(Object.assign({}, style), { height: '100%' }) }, React.createElement(Box, { display: "flex", flexDirection: "row", alignItems: "center", style: {
            gap: '8px',
            width: '100%',
            padding: '8px',
            backgroundColor: headerColor && getEllipseColor(theme, headerColor, 'light'),
            color: theme.palette.getContrastText(getEllipseColor(theme, headerColor, 'light')),
        } }, subCardType !== '' && (React.createElement(IconButton, { "aria-label": "delete", size: "small", onClick: () => handleChange(''), style: { marginLeft: '10px' }, id: "udpRecord-ItemsWidgetCard-delete", udprecordid: "udpRecord-ItemsWidgetCard-delete" }, React.createElement(KeyboardArrowLeftIcon, { fontSize: "inherit" }))), React.createElement(AmbientCardTitle, { title: subCardType !== '' ? subCardType : title, style: {
            backgroundColor: headerColor && getEllipseColor(theme, headerColor, 'light'),
        } })), !checked ? (React.createElement(Grow, Object.assign({ in: !checked, style: { transformOrigin: '0 0 0', width: '100%' } }, (!checked ? { timeout: 500 } : {}), { mountOnEnter: true, unmountOnExit: true }), React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", className: classes.secondaryContainer }, React.createElement(List, { className: classes.listContainer }, (cardData === null || cardData === void 0 ? void 0 : cardData.length) > 0 ? (cardData === null || cardData === void 0 ? void 0 : cardData.map((cardItem, index) => {
        const { defaultColor, textColor, backgroundColor, icon: Icon, } = getSubCardInfo(cardItem === null || cardItem === void 0 ? void 0 : cardItem.accountItemName);
        return (React.createElement(React.Fragment, { key: `${cardItem === null || cardItem === void 0 ? void 0 : cardItem.name}-${index}` }, React.createElement(ListItem, { button: true, className: classes.listItem, style: {
                backgroundColor,
            }, onClick: () => handleChange(cardItem), id: 'udpRecord-ItemsWidgetCard-ListItem-' +
                (cardItem === null || cardItem === void 0 ? void 0 : cardItem.name.replace(/\s+/g, '')) +
                '-' +
                (cardItem === null || cardItem === void 0 ? void 0 : cardItem.businessObjectKey), udprecordid: 'udpRecord-ItemsWidgetCard-ListItem-' +
                (cardItem === null || cardItem === void 0 ? void 0 : cardItem.name.replace(/\s+/g, '')) +
                '-' +
                (cardItem === null || cardItem === void 0 ? void 0 : cardItem.businessObjectKey) }, React.createElement(ListItemAvatar, { className: classes.listItemAvatar }, React.createElement(Icon, { color: defaultColor, width: "22px", height: "22px" })), React.createElement(ListItemText, { className: classes.listItemText, primary: React.createElement(Typography, { variant: "subtitle2", className: classes === null || classes === void 0 ? void 0 : classes.listItemPrimary, style: { color: textColor } }, cardItem === null || cardItem === void 0 ? void 0 : cardItem.name), secondary: React.createElement(Typography, { variant: "caption", className: classes === null || classes === void 0 ? void 0 : classes.listItemSecondary }, (cardItem === null || cardItem === void 0 ? void 0 : cardItem.date)
                ? DateTime.fromJSDate(new Date(cardItem === null || cardItem === void 0 ? void 0 : cardItem.date)).isValid
                    ? DateTime.fromJSDate(new Date(cardItem === null || cardItem === void 0 ? void 0 : cardItem.date)).toFormat('MMM dd, yyyy')
                    : 'Invalid date'
                : 'Date field is empty') }), React.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-end", className: classes.itemContainer }, React.createElement(Typography, { variant: "subtitle2", className: classes.listItemPrimary }, `$${(cardItem === null || cardItem === void 0 ? void 0 : cardItem.amount) || 0.0}`))), React.createElement(Divider, null)));
    })) : (React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, React.createElement(EmptyStateDisplay, { primaryText: emptyStatePrimaryText !== null && emptyStatePrimaryText !== void 0 ? emptyStatePrimaryText : t('No results found'), icon: emptyStateIcon, iconSize: emptyStateIconSize, imageSrc: emptyStateImageSrc, imageWidth: emptyStateImageWidth }))))))) : (React.createElement(Fade, Object.assign({ in: checked, style: { transformOrigin: '0 0 0', width: '100%' } }, (checked ? { timeout: 1000 } : {}), { mountOnEnter: true, unmountOnExit: true }), React.createElement(Box, null, React.createElement(SubCard, { cardInfo: cardItemData }))))));
};
ItemsWidgetCard.propTypes = {
    /**
     * @type {?array} list of flags to render, required array object structure e.g
     * [{
     *  name: string, --> must be correspond with the name of the subCard object name
     *  date: date | string,
     *  amount: number | string
     * }]
     */
    cardData: PropTypes.array.isRequired,
    /**
     * @type {?object} sub-cards detail content object, e.g
     *
     * CardNameXX and CardNameYY must be specified and corresponding with the name attribute in the card data
     *
       const subCardsList = {
        CardNameXX: {
          defaultColor: theme.palette.primary.main,
          textColor: theme.palette.secondary.main,
          component: props => {
                return <PredefinedReactComponent {...props} />;
          },
          icon: LoanIcon,
        },
        CardNameYY: {
          defaultColor: '#73368E',
          textColor: '#FF9800',
          component: props => {
                return <PredefinedReactComponentTwo {...props} />;
          },
          icon: LoanIcon,
        },
     * }]
    */
    subCardsList: PropTypes.object.isRequired,
    /**
     * Optional, additional properties to apply some styles over the main container
     */
    style: PropTypes.object,
};
//# sourceMappingURL=ItemsWidgetCard.js.map