import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { StatusChip } from '../dataDisplay/status/StatusChip';
import { useAxiosGet } from '../../utilities/useAxiosGet';
import { Typography, CircularProgress } from '@material-ui/core';
import { executeQueryInstance } from '../../udp/utilities/methodUtils';
import { getThresholdStatus } from './utilities/aggregateUtils';
import { AlertPill } from '../dataDisplay/entityHeader/ui/AlertPill';
import { SeverityTypeEnums } from '../../enums/unitySystemEnums';
import { ConfigService } from '../../configService';
export const AggregateChip = (props) => {
    const { aggregateThresholdId, aggregateThresholdParamMappings, label, chipColor, setStatus, isActionable = false, isAlert = false, hideAlert = false, onAlertClick } = props;
    const [color, setColor] = useState(chipColor);
    const [aggregateValue, setAggregateValue] = useState(null);
    const [loading, setLoading] = useState(false);
    const [{ data: aggregateThreshold, loading: loadingAggregateThreshold }] = useAxiosGet(ConfigService.integrationV2ApiUrl, `aggregateThreshold/${aggregateThresholdId}`, {}, !!!aggregateThresholdId);
    const alertDisplayLabel = useMemo(() => {
        if (!label) {
            return aggregateValue;
        }
        return `${label.replace('{value}', aggregateValue)}`;
    }, [aggregateValue, label]);
    useEffect(() => {
        const setAggregateData = async (apiMethodInstanceId, valueKey) => {
            var _a, _b;
            setLoading(true);
            const data = aggregateThresholdParamMappings
                ? { data: aggregateThresholdParamMappings }
                : { data: {} };
            const response = await executeQueryInstance(data, apiMethodInstanceId).catch((res) => setLoading(false));
            if ((response === null || response === void 0 ? void 0 : response.status) === 200 && valueKey) {
                const aggregateResult = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.aggregateResults) && ((_b = response.data) === null || _b === void 0 ? void 0 : _b.aggregateResults[0]);
                if (aggregateResult) {
                    setAggregateValue(aggregateResult[valueKey]
                        ? Math.round(aggregateResult[valueKey])
                        : '');
                }
            }
            setLoading(false);
        };
        if (aggregateThreshold) {
            setAggregateData(aggregateThreshold.apiMethodInstanceId, aggregateThreshold.aggregateKey);
        }
        // when aggregateThresholdParamMappings changes we don't want to re-render chip
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [aggregateThreshold]);
    useEffect(() => {
        if (aggregateThreshold && aggregateValue) {
            const status = getThresholdStatus(aggregateThreshold, aggregateValue);
            setColor(status);
            if (setStatus) {
                setStatus(status || 'default');
            }
        }
    }, [aggregateThreshold, aggregateValue, setStatus]);
    if (loading || loadingAggregateThreshold) {
        return React.createElement(CircularProgress, { size: 18 });
    }
    if (!color && !isAlert) {
        return (React.createElement(Typography, { variant: "caption2", style: { fontSize: '0.7rem' } }, label || aggregateValue));
    }
    if (isAlert) {
        return (React.createElement(AlertPill, { handleClick: onAlertClick, successCount: color === SeverityTypeEnums.Success ? aggregateValue : '', errorCount: color === SeverityTypeEnums.Error ? aggregateValue : '', warningCount: color === SeverityTypeEnums.Warning ? aggregateValue : '', infoCount: color === SeverityTypeEnums.Info ? aggregateValue : '', defaultCount: !color && (aggregateValue || ''), successLabel: color === SeverityTypeEnums.Success ? alertDisplayLabel : '', errorLabel: color === SeverityTypeEnums.Error ? alertDisplayLabel : '', warningLabel: color === SeverityTypeEnums.Warning ? alertDisplayLabel : '', infoLabel: color === SeverityTypeEnums.Info ? alertDisplayLabel : '', defaultLabel: !color && (alertDisplayLabel || ''), hideSuccess: color === SeverityTypeEnums.Success ? hideAlert : false, hideError: color === SeverityTypeEnums.Error ? hideAlert : false, hideWarning: color === SeverityTypeEnums.Warning ? hideAlert : false, hideInfo: color === SeverityTypeEnums.Info ? hideAlert : false, hideDefault: !color ? hideAlert : false }));
    }
    return label || aggregateValue ? (React.createElement(StatusChip, { label: label || aggregateValue, status: color, useSmallChip: true, isActionable: isActionable })) : null;
};
AggregateChip.propTypes = {
    /**
     * Color of chip
     */
    chipColor: PropTypes.oneOf([
        'success',
        'error',
        'warning',
        'info',
        undefined,
        null
    ]),
    /**
     * Id of AggregateThreshold
     */
    aggregateThresholdId: PropTypes.oneOf([PropTypes.string, undefined, null])
};
//# sourceMappingURL=AggregateChip.js.map