import * as React from 'react';
import { Callout, FocusZone, FocusZoneDirection, List } from '@fluentui/react';
import { Textbox } from './Textbox';
import { getColorFromToken } from '../../../utilities/colors';
export var LabelLink = function (props) {
    var _a, _b;
    var gRef = React.useRef(null);
    var _c = React.useState(false), showCard = _c[0], setShowCard = _c[1];
    var onDismiss = function () { return setShowCard(false); };
    var onClick = function () { return setShowCard(true); };
    var onRenderCell = function (i) { return React.createElement("div", { "data-is-focusable": true }, i && i()); };
    var callout = null;
    if (showCard) {
        var cards = props.labelDef.aggregatedIdx.map(function (i) { return props.lineDefs[i].onRenderCard; }).filter(function (c) { return !!c; });
        if (cards.length > 0) {
            callout = (React.createElement(Callout, { target: gRef.current, 
                // eslint-disable-next-line react/jsx-no-bind
                onDismiss: onDismiss, setInitialFocus: true, role: "dialog" },
                React.createElement(FocusZone, { isCircularNavigation: true, direction: FocusZoneDirection.vertical },
                    React.createElement(List, { items: cards, role: "alert", "aria-roledescription": " ", 
                        // eslint-disable-next-line react/jsx-no-bind
                        onRenderCell: onRenderCell }))));
        }
    }
    var text;
    var fill = props.textColor
        ? getColorFromToken(props.textColor, (_a = props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
        : (_b = props.theme) === null || _b === void 0 ? void 0 : _b.semanticColors.messageText;
    if (props.labelDef.aggregatedIdx.length === 1) {
        text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;
    }
    else {
        text = props.mergedLabel(props.labelDef.aggregatedIdx.length);
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("g", { ref: gRef, onClick: onClick, "data-is-focusable": true, style: { cursor: 'pointer' } },
            React.createElement(Textbox, { text: text, x: props.labelDef.x, y: props.textY, width: props.textWidth, lineHeight: props.textLineHeight, textAnchor: props.labelDef.anchor, fontSize: props.textFontSize, fill: fill })),
        callout));
};
//# sourceMappingURL=LabelLink.js.map