import React from 'react';
import { useActionStore } from '../../../stores/actionStore';
import { UdpAlert } from './UdpAlert';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    alertContainer: {
        marginRight: theme.spacing(0.5)
    }
}));
export const UdpAlertsContainer = (props) => {
    var _a;
    const { alertList } = props;
    const classes = useStyles(props);
    const selectedNode = useActionStore((state) => state.selectedNode);
    const alerts = alertList || ((_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.properties) === null || _a === void 0 ? void 0 : _a.alerts) || [];
    return (React.createElement("div", { className: classes.root }, alerts === null || alerts === void 0 ? void 0 : alerts.map((alert, i) => (React.createElement("div", { className: alerts.length - 1 !== i ? classes.alertContainer : '' }, React.createElement(UdpAlert, { key: alert === null || alert === void 0 ? void 0 : alert.id, alertId: alert.alertId }))))));
};
//# sourceMappingURL=UdpAlertsContainer.js.map