var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import * as React from 'react';
import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
import { mergeCallback } from '@workday/canvas-kit-react/common';
import { TooltipContainer, useTooltip } from '@workday/canvas-kit-react/tooltip';
var isOverflowed = function (element) {
    return (element.textContent || '').includes('more');
};
function mergeCallbacks(elemProps, componentProps, keys) {
    if (keys === void 0) { keys = Object.keys(componentProps); }
    return keys.reduce(function (mergedProps, key) {
        if (typeof elemProps[key] === 'function') {
            mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
        }
        else {
            mergedProps[key] = componentProps[key];
        }
        return mergedProps;
    }, {});
}
function getTooltipContents(title) {
    if (title instanceof Array) {
        if (title.length && title[0].value) {
            return title.map(function (v) { return v.value; }).join(', ');
        }
    }
    return '';
}
export var MoreTooltip = function (_a) {
    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, title = _a.title, elemProps = __rest(_a, ["placement", "children", "title"]);
    var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
    var _d = useTooltip({ type: 'describe' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
    var onMouseEnter = function (event) {
        var target = event.currentTarget;
        setTitleText(getTooltipContents(title));
        if (isOverflowed(target)) {
            targetProps.onMouseEnter(event);
        }
    };
    var onFocus = function (event) {
        var target = event.currentTarget;
        setTitleText(getTooltipContents(title));
        if (isOverflowed(target)) {
            targetProps.onFocus(event);
        }
    };
    return (React.createElement(React.Fragment, null,
        React.cloneElement(children, __assign(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter,
            onFocus: onFocus, 'aria-label': undefined }), mergeCallbacks(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter, onFocus: onFocus }), children.props))),
        React.createElement(Popper, __assign({ placement: placement }, popperProps), function (_a) {
            var placement = _a.placement;
            var transformOrigin = getTransformFromPlacement(placement);
            return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
        })));
};
