import * as React from 'react';
import { UIHelper } from '../UIHelper';
import ButtonPreviewDelete from '../Components/Buttons/ButtonPreviewDelete';
import { PanelWithButton } from '../Components/Panels/PanelWithButton';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import { Flex, Text } from 'rebass';
import { allIcons } from '../../components/icons';
import ListGroupItem from '../../components/List/ListGroupItem';
import ListGroup from '../../components/List/ListGroup';
import SimpleButton from '../../components/SimpleButton';
export class AlertsPanel extends React.Component {
    componentWillUnmount() {
        this.props.onRender?.();
    }
    render() {
        let alerts = this.props.Alerts.map((alert, index) => {
            let alertHasHeader = StringExtensions.IsNotNullOrEmpty(alert.header);
            const textColor = UIHelper.getColorByMessageType(alert.alertDefinition.MessageType);
            const textStyle = {
                color: textColor,
                fill: textColor,
            };
            const iconName = UIHelper.getGlyphByMessageType(alert.alertDefinition.MessageType);
            const IconCmp = allIcons[iconName];
            const icon = IconCmp ? React.createElement(IconCmp, null) : null;
            let alertText = (React.createElement("div", { key: alert.Uuid, style: { maxWidth: '600px', width: '100%' } },
                React.createElement(Flex, { alignItems: "center", width: "100%" },
                    React.createElement(Text, { style: textStyle }, icon),
                    alertHasHeader ? (React.createElement("b", { style: { flex: 1 } }, alert.header)) : (React.createElement("div", { style: { fontSize: 10, flex: 1, display: 'inline-block' } }, alert.message)),
                    React.createElement(ButtonPreviewDelete, { onClick: () => this.props.onClearAlert(alert), tooltip: "Clear Alert", disabled: false, style: { float: 'left' }, accessLevel: 'Full' })),
                React.createElement("div", null, alertHasHeader && React.createElement("span", { style: { fontSize: 10 } }, alert.message))));
            return (React.createElement(ListGroupItem, { factory: "div", key: alert.Uuid || index }, alertText));
        });
        let clearAllButton = (React.createElement(SimpleButton, { onClick: () => this.props.onClearAllAlerts(this.props.Alerts), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"));
        return (React.createElement(PanelWithButton, { variant: "default", bodyProps: { padding: 0 }, headerText: 'Alerts', button: clearAllButton },
            React.createElement(ListGroup, null, alerts)));
    }
}
