"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const AdaptablePopover_1 = require("../AdaptablePopover");
const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
const Flex_1 = require("../../components/Flex");
const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
class AlertViewPanelComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ShowMessage: false,
            Alerts: this.props.AdaptableAlerts,
        };
    }
    componentDidUpdate() {
        if (this.state.Alerts.length != this.props.AdaptableAlerts.length) {
            this.setState({ ShowMessage: true, Alerts: this.props.AdaptableAlerts });
        }
    }
    render() {
        const { color: buttonTextColor, background: buttonBackground } = (0, getAlertButtonStyle_1.getAlertButtonStyle)(this.props.AdaptableAlerts);
        const collapsedText = this.props.AdaptableAlerts.length == 0
            ? '0 Alerts'
            : this.props.AdaptableAlerts.length == 1
                ? '1 Alert'
                : this.props.AdaptableAlerts.length + ' Alerts';
        const alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
        const isToolbar = this.props.viewType === 'Toolbar';
        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: (0, clsx_1.default)(`ab-${elementType}__Alert__wrap twa:gap-1`, {
                'twa:min-w-[140px] twa:w-[140px]': isToolbar,
                [`twa:flex-1`]: !isToolbar,
            }) },
            React.createElement(Flex_1.Flex, { key: `${buttonTextColor}_${buttonBackground}_${collapsedText}`, className: `ab-${elementType}__Alert__text twa:flex-1 twa:rounded-standard twa:p-2 text-2 twa:items-center twa:justify-center twa:min-h-input`, style: { color: buttonTextColor, backgroundColor: buttonBackground } }, collapsedText),
            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex_1.Flex, { className: 'twa:gap-1' },
                React.createElement(Flex_1.Flex, { className: "twa:flex twa:box-border" },
                    React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear All Alerts', variant: 'outlined', className: `ab-${elementType}__Alert__clear`, onClick: () => this.props.onDeleteAllAlert(this.state.Alerts), tooltip: "Clear All Alerts", showText: this.props.viewType === 'ToolPanel' }, 'Clear Alerts')),
                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));
    }
}
function mapStateToProps(state, ownProps) {
    return {
        AlertDefinitions: state.Alert.AlertDefinitions,
        AdaptableAlerts: state.Internal.AdaptableAlerts,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        onDeleteAlert: (alert) => dispatch(InternalRedux.AdaptableAlertDelete(alert)),
        onDeleteAllAlert: (alerts) => dispatch(InternalRedux.AdaptableAlertDeleteAll(alerts)),
    };
}
exports.AlertViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);
