import React from 'react';
import { makeStyles, Card, CardContent, Typography } from '@material-ui/core';
import { StatusLineItem } from './StatusLineItem';
import { NotificationElement } from './NotificationElement';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    overviewContainer: {
        width: theme.spacing(16),
        height: theme.spacing(16),
        background: '#393939', // Add to theme
        marginRight: theme.spacing(2),
        position: 'relative'
    },
    notification: {
        position: 'absolute',
        right: 0,
        top: 0
    },
    totalNumber: {
        textAlign: 'center',
        // color: theme.palette.common.white
        color: '#FFFFFF', // Hex color added to avoid TypeError
        fontWeight: 400
    },
    label: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: -8,
        // color: theme.pallette.common.white
        color: '#FFFFFF'
    },
    itemContainer: {
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignContent: 'space-around',
        marginTop: theme.spacing(0.5)
    }
}));
export const TicketCard = ({ totalAmount, label, notification, alertNumber, ticketData, component = 'h6' }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement(Card, { elevation: 0, square: true, className: classes.overviewContainer }, React.createElement(CardContent, null, React.createElement(Typography, { variant: "h1", component: component, className: classes.totalNumber }, totalAmount)), React.createElement("div", { className: classes.label }, React.createElement(Typography, { variant: "caption" }, label, " ")), notification && (React.createElement("div", { className: classes.notification }, React.createElement(NotificationElement, { alertNumber: alertNumber }))))), React.createElement("div", { className: classes.itemContainer }, ticketData &&
        ticketData.map((item) => {
            return (React.createElement(StatusLineItem, { label: item.label, amount: item.amount, status: item.status === 'error' && 'error', icon: item.icon, key: item.id }));
        }))));
};
TicketCard.propTypes = {
    /**
     * Total amount stat
     */
    totalAmount: PropTypes.number,
    /**
     * Stat label
     */
    label: PropTypes.string.isRequired,
    /**
     * Type of status to toggle notification
     */
    notification: PropTypes.bool,
    /**
     * amount of alert items
     */
    alertNumber: PropTypes.number,
    /**
     * prop for mapped data
     */
    ticketData: PropTypes.arrayOf(PropTypes.shape({
        ticketAmount: PropTypes.string.isRequired,
        label: PropTypes.number.isRequired,
        notification: PropTypes.number.isRequired,
        alertNumber: PropTypes.number,
        id: PropTypes.number.isRequired,
        ticketData: PropTypes.arrayOf(PropTypes.shape({
            label: PropTypes.string.isRequired,
            amount: PropTypes.number,
            status: PropTypes.string.isRequired,
            icon: PropTypes.node
        }))
    }).isRequired).isRequired,
    /**
     * Header Tag override. Defaults to H2
     */
    component: PropTypes.string
};
TicketCard.defaultProps = {
    component: 'h2'
};
//# sourceMappingURL=TicketCard.js.map