import React, { useMemo } from 'react';
import { isNil } from 'ramda';
import classnames from 'classnames';
import Tooltip from '@mui/material/Tooltip';
import { useContextSelector } from '@fluentui/react-context-selector';
import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
import { getIconByVerificationStatus, getTooltipTitleByVerificationStatus } from './helpers';
import styles from './AttributeVerificationStatus.module.css';
export var AttributeVerificationStatus = function (_a) {
    var attributeType = _a.attributeType, attributeValue = _a.attributeValue;
    var getVerificationStatus = useContextSelector(AttributesVerificationContext, function (context) { return context.getVerificationStatus; });
    var verificationStatus = useMemo(function () { return getVerificationStatus(attributeType, attributeValue); }, [getVerificationStatus, attributeType, attributeValue]);
    if (isNil(verificationStatus)) {
        return null;
    }
    var Icon = getIconByVerificationStatus(verificationStatus.status);
    var tooltipTitle = getTooltipTitleByVerificationStatus(verificationStatus);
    return (React.createElement("div", { className: classnames(styles.status, styles[verificationStatus.status]), "data-reltio-id": "attribute-verification-status-".concat(verificationStatus.status) },
        React.createElement(Tooltip, { title: tooltipTitle, placement: "bottom" },
            React.createElement("span", { className: styles.icon },
                React.createElement(Icon, null)))));
};
