import React from 'react';
import i18n from 'ui-i18n';
import Typography from '@mui/material/Typography';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import InfoIcon from '@mui/icons-material/Info';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { getFallbackLabels } from '../../helpers';
import { withTooltip } from '../../../../../HOCs/withTooltip';
import styles from './FallbackIndicator.module.css';
var InfoIconWithTooltip = withTooltip(InfoIcon);
export var FallbackIndicator = function (_a) {
    var ovDetails = _a.ovDetails;
    var metadata = useMdmMetadata();
    var fallbackLabels = getFallbackLabels(metadata, ovDetails);
    var renderTooltip = function () {
        return (React.createElement("div", { className: styles.fallbackList },
            React.createElement(Typography, { variant: "caption", className: styles.fallbackTitle }, i18n.text('OV decision path')),
            fallbackLabels.map(function (label, index) { return (React.createElement("div", { key: index, className: styles.fallbackItem },
                index === fallbackLabels.length - 1 ? (React.createElement(CheckCircleIcon, { className: styles.fallbackItemIcon })) : (React.createElement(CancelOutlinedIcon, { className: styles.fallbackItemIcon })),
                React.createElement(Typography, { variant: "caption" }, label))); })));
    };
    return fallbackLabels.length > 0 ? (React.createElement(InfoIconWithTooltip, { tooltipTitle: renderTooltip(), className: styles.fallbackIcon })) : null;
};
