import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ShareBoxIcon, Tooltip, ClickAwayListener, } from '@finos/legend-art';
import { DerivedProperty, getMultiplicityDescription, CORE_PURE_PATH, PURE_DOC_TAG, } from '@finos/legend-graph';
import { useState } from 'react';
export const QueryBuilderTaggedValueInfoTooltip = (props) => {
    const { taggedValues } = props;
    const [showMore, setShowMore] = useState(false);
    const toggleShowMoreButton = (event) => {
        event.stopPropagation();
        setShowMore(!showMore);
    };
    const isDocTaggedValue = (val) => val.tag.ownerReference.value.path === CORE_PURE_PATH.PROFILE_DOC &&
        val.tag.value.value === PURE_DOC_TAG;
    const documentation = taggedValues
        .filter((taggedValue) => isDocTaggedValue(taggedValue))
        .map((taggedValue) => taggedValue.value);
    const tagValuesExceptDoc = taggedValues.filter((taggedValue) => !isDocTaggedValue(taggedValue));
    const taggedValueCellRender = (taggedValue) => (_jsxs("div", { className: "query-builder__tooltip__item", children: [_jsx("div", { className: "query-builder__tooltip__item__label", children: `${taggedValue.tag.ownerReference.value.name}.${taggedValue.tag.value.value}` }), _jsx("div", { className: "query-builder__tooltip__item__value", children: taggedValue.value })] }, `${taggedValue.tag.ownerReference.value.name}.${taggedValue.value}`));
    return (_jsx("div", { children: tagValuesExceptDoc.length > 0 ? (_jsxs("div", { className: "query-builder__tooltip__item", children: [_jsx("div", { className: "query-builder__tooltip__item__label", children: "Tagged Values" }), _jsxs("div", { className: "query-builder__tooltip__taggedValues", children: [taggedValues.slice(0, 1).map((taggedValue) => (_jsxs("div", { className: "query-builder__tooltip__combo", children: [taggedValueCellRender(taggedValue), taggedValues.length > 3 && (_jsx("button", { className: "btn btn--dark query-builder__tooltip__taggedValues__show-btn", onClick: toggleShowMoreButton, title: "Toggle button to show more/less", children: showMore ? 'Show Less' : 'Show More' }))] }, `${taggedValue.tag.ownerReference.value.name}.${taggedValue.value}`))), taggedValues
                            .slice(1, 3)
                            .map((taggedValue) => taggedValueCellRender(taggedValue)), showMore &&
                            taggedValues
                                .slice(3)
                                .map((taggedValue) => taggedValueCellRender(taggedValue))] })] })) : (_jsx(_Fragment, { children: Boolean(documentation.length) && (_jsxs("div", { className: "query-builder__tooltip__item", children: [_jsx("div", { className: "query-builder__tooltip__item__label", children: "Documentation" }), _jsx("div", { className: "query-builder__tooltip__item__value", children: documentation.join('\n\n') })] })) })) }));
};
export const QueryBuilderBaseInfoTooltip = (props) => {
    const { title, data, placement, children, footerElement } = props;
    const [open, setIsOpen] = useState(false);
    return (_jsx(ClickAwayListener, { onClickAway: () => setIsOpen(false), mouseEvent: "onMouseDown", children: _jsx("div", { children: _jsx(Tooltip, { arrow: true, ...(placement !== undefined ? { placement } : {}), classes: {
                    tooltip: 'query-builder__tooltip',
                    arrow: 'query-builder__tooltip__arrow',
                    tooltipPlacementRight: 'query-builder__tooltip--right',
                }, open: open, onClose: () => setIsOpen(false), slotProps: {
                    transition: {
                        // disable transition
                        // NOTE: somehow, this is the only workaround we have, if for example
                        // we set `appear = true`, the tooltip will jump out of position
                        timeout: 0,
                    },
                }, disableFocusListener: true, disableHoverListener: true, disableTouchListener: true, title: _jsxs("div", { className: "query-builder__tooltip__content", children: [_jsx("div", { className: "query-builder__tooltip__header", children: title }), data.map((elem) => (_jsxs("div", { className: "query-builder__tooltip__item", children: [_jsx("div", { className: "query-builder__tooltip__item__label", children: elem.label }), _jsx("div", { className: "query-builder__tooltip__item__value", children: elem.value }), elem.actionButton] }, elem.label))), footerElement] }), children: _jsx("div", { onClick: (event) => {
                        setIsOpen(!open);
                        event.stopPropagation();
                    }, children: children }) }) }) }));
};
export const QueryBuilderPropertyInfoTooltip = (props) => {
    const { title, property, path, isMapped, children, placement, type, explorerState, } = props;
    const data = [
        {
            label: 'Type',
            value: type?.path ?? property.genericType.value.rawType.path,
        },
        {
            label: 'Path',
            value: path,
            actionButton: explorerState ? (_jsx("div", { className: "query-builder__tooltip__item__action", children: _jsx("button", { onClick: () => explorerState.highlightTreeNode(path), title: "Show in tree", children: _jsx(ShareBoxIcon, {}) }) })) : undefined,
        },
        {
            label: 'Multiplicity',
            value: getMultiplicityDescription(property.multiplicity),
        },
        {
            label: 'Derived Property',
            value: property instanceof DerivedProperty ? 'Yes' : 'No',
        },
        {
            label: 'Mapped',
            value: isMapped ? 'Yes' : 'No',
        },
    ];
    return (_jsx(QueryBuilderBaseInfoTooltip, { title: title, data: data, placement: placement, footerElement: _jsx(QueryBuilderTaggedValueInfoTooltip, { taggedValues: property.taggedValues }), children: children }));
};
export const QueryBuilderDerivationInfoTooltip = (props) => {
    const { title, children, placement, type } = props;
    const data = [
        {
            label: 'Type',
            value: type?.path ?? 'undefined',
        },
    ];
    return (_jsx(QueryBuilderBaseInfoTooltip, { title: title, data: data, placement: placement, children: children }));
};
//# sourceMappingURL=QueryBuilderPropertyInfoTooltip.js.map