import React, { useContext } from 'react';
import Tooltip from '@mui/material/Tooltip';
import { isNested } from '@reltio/mdm-sdk';
import { isNil } from 'ramda';
import { PivotingAttributeContext } from '../contexts/PivotingAttributeContext';
import { useMdmAction, useMdmMetadata } from '../contexts/MdmModuleContext';
import { usePivotingDataLoader } from '../hooks/usePivotingDataLoader';
import { convertNestedAttributePivotingValue, convertSimpleAttributePivotingValue, generatePivotingValue, preparePivotingAttributeValue } from './helpers';
import PivotingIcon from '../icons/PivotingIcon';
import { PivotingTooltipContent } from './components/PivotingTooltipContent';
import { PivotingUriLink } from '../PivotingUriLink';
import { usePivotingTooltipStyles, useStyles } from './styles';
export var PivotingTooltip = function (_a) {
    var value = _a.value, attributeType = _a.attributeType, children = _a.children, className = _a.className;
    var styles = usePivotingTooltipStyles();
    var contentStyles = useStyles();
    var pivotingAttributesList = useContext(PivotingAttributeContext) || [];
    var openPivotingPerspective = useMdmAction('openPivotingPerspective');
    var metadata = useMdmMetadata() || {};
    var isNestedAttribute = isNested(attributeType);
    var pivotingValue = isNestedAttribute
        ? generatePivotingValue(attributeType, value.value, pivotingAttributesList, metadata)
        : preparePivotingAttributeValue(value.lookupCode || value.value, attributeType);
    var isPivotingAttribute = pivotingAttributesList.some(function (_a) {
        var uri = _a.uri;
        return uri === attributeType.uri;
    }) &&
        ((Array.isArray(pivotingValue) && pivotingValue.length) ||
            (!Array.isArray(pivotingValue) && !isNil(pivotingValue)));
    var pivotingAttribute = pivotingAttributesList.find(function (_a) {
        var uri = _a.uri;
        return uri === attributeType.uri;
    });
    var popupConfiguration = pivotingAttribute === null || pivotingAttribute === void 0 ? void 0 : pivotingAttribute.popup;
    var convertPivotingValue = function () {
        return Array.isArray(pivotingValue)
            ? convertNestedAttributePivotingValue(pivotingValue)
            : convertSimpleAttributePivotingValue(attributeType, pivotingValue);
    };
    var generatedValue = isPivotingAttribute ? convertPivotingValue() : undefined;
    var handleSeeAllClick = function () {
        openPivotingPerspective({ value: generatedValue, attributeType: attributeType });
    };
    var _b = usePivotingDataLoader({
        attributeType: attributeType,
        value: pivotingValue,
        entityType: popupConfiguration === null || popupConfiguration === void 0 ? void 0 : popupConfiguration.entityType
    }), entities = _b.entities, total = _b.total, loadPivotingData = _b.loadPivotingData;
    return isPivotingAttribute ? (React.createElement(Tooltip, { arrow: true, placement: "right-start", classes: styles, disableInteractive: false, onOpen: loadPivotingData, title: React.createElement(PivotingTooltipContent, { generatedValue: generatedValue, attributeType: attributeType, label: popupConfiguration === null || popupConfiguration === void 0 ? void 0 : popupConfiguration.label, onSeeAllClick: handleSeeAllClick, entities: entities, total: total }) },
        React.createElement("span", { className: className },
            React.createElement(PivotingIcon, { className: contentStyles.icon }),
            React.createElement(PivotingUriLink, { onClick: handleSeeAllClick, className: contentStyles.content, value: generatedValue, attributeType: attributeType }, children)))) : (React.createElement(React.Fragment, null, children));
};
