import React, { useState } from 'react';
import { cond, prop } from 'ramda';
import i18n from 'ui-i18n';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import InfoIcon from '@mui/icons-material/Info';
import { findAttributeTypeByUri, getLabel, getSourceSystemLabel } from '@reltio/mdm-sdk';
import { SmallIconButtonWithTooltip } from '../../../../../SmallIconButton';
import { SourceIcon } from '../../../../../SourceIcon';
import { useMdmMetadata } from '../../../../../contexts/MdmModuleContext';
import { useStyles } from './styles';
var SourcesRenderer = function (_a) {
    var sourcesUriOrder = _a.sourcesUriOrder, metadata = _a.metadata;
    var styles = useStyles();
    return (React.createElement(React.Fragment, null, sourcesUriOrder.map(function (sourceUri) { return (React.createElement(ListItem, { key: sourceUri, className: styles.popupItem },
        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: sourceUri }),
        React.createElement(ListItemText, { primary: getSourceSystemLabel(metadata, sourceUri), primaryTypographyProps: { variant: 'body2' } }))); })));
};
var AttributeRenderer = function (_a) {
    var attributeUri = _a.attributeUri, metadata = _a.metadata;
    var styles = useStyles();
    var attributeType = findAttributeTypeByUri(metadata, attributeUri);
    return (React.createElement(ListItem, { key: attributeType.uri, className: styles.popupItem },
        React.createElement(ListItemText, { primary: getLabel(attributeType.label), primaryTypographyProps: { variant: 'body2' } })));
};
var getInfoTitle = cond([
    [prop('sourcesUriOrder'), function () { return i18n.text('Source sequence'); }],
    [prop('primaryAttributeUri'), function () { return i18n.text('Attribute winner'); }],
    [prop('comparisonAttributeUri'), function () { return i18n.text('Comparison attribute'); }]
]);
var getInfoContent = cond([
    [
        prop('sourcesUriOrder'),
        function (_a, metadata) {
            var sourcesUriOrder = _a.sourcesUriOrder;
            return React.createElement(SourcesRenderer, { metadata: metadata, sourcesUriOrder: sourcesUriOrder });
        }
    ],
    [
        prop('primaryAttributeUri'),
        function (_a, metadata) {
            var primaryAttributeUri = _a.primaryAttributeUri;
            return (React.createElement(AttributeRenderer, { metadata: metadata, attributeUri: primaryAttributeUri }));
        }
    ],
    [
        prop('comparisonAttributeUri'),
        function (_a, metadata) {
            var comparisonAttributeUri = _a.comparisonAttributeUri;
            return (React.createElement(AttributeRenderer, { metadata: metadata, attributeUri: comparisonAttributeUri }));
        }
    ]
]);
export var RuleTypeInfoButton = function (_a) {
    var info = _a.info;
    var styles = useStyles();
    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
    var metadata = useMdmMetadata();
    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
    var closePopup = function () { return setAnchorEl(null); };
    return (React.createElement(React.Fragment, null,
        React.createElement(SmallIconButtonWithTooltip, { icon: InfoIcon, tooltipTitle: i18n.text('View details'), size: 'XXS', onClick: openPopup }),
        React.createElement(Popover, { classes: { paper: styles.rulePopup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'right'
            }, transformOrigin: {
                vertical: 'top',
                horizontal: 'right'
            } },
            React.createElement("div", { className: styles.popupTitleWrapper },
                React.createElement(IconButton, { className: styles.closeButton, onClick: closePopup, size: "large" },
                    React.createElement(CloseIcon, null)),
                React.createElement(Typography, { variant: 'subtitle1', className: styles.popupTitle }, getInfoTitle(info))),
            React.createElement(List, { component: "div", className: styles.popupItemsWrapper }, getInfoContent(info, metadata)))));
};
