/**********************************************************************************
 * Copyright (c) 2025 EclipseSource and others.
 *
 * This program and the accompanying materials are made available under the
 * terms of the MIT License as outlined in the LICENSE file.
 **********************************************************************************/

import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';

export function createHighlightedText(label?: string, highlights?: [number, number][]): React.JSX.Element {
    if (label === undefined) {
        return <span>No label provided</span>;
    }
    if (highlights === undefined || highlights.length === 0) {
        return <span>{label}</span>;
    }

    highlights.sort((a, b) => a[0] - b[0]);

    const result: React.JSX.Element[] = [];
    let currentPosition = 0;

    highlights.forEach(([start, end], index) => {
        if (currentPosition < start) {
            result.push(<span key={`text-${index}`}>{label.slice(currentPosition, start)}</span>);
        }
        result.push(
            <span key={`highlight-${index}`} className='label-highlight'>
                {label.slice(start, end + 1)}
            </span>
        );
        currentPosition = end + 1;
    });

    // Add any remaining text after the last highlight
    if (currentPosition < label.length) {
        result.push(<span key='text-end'>{label.slice(currentPosition)}</span>);
    }

    return (
        <div className='tree-label'>
            <span>{result}</span>
        </div>
    );
}

export function createLabelWithTooltip(child: React.JSX.Element, tooltip?: string): React.JSX.Element {
    const label = <div className='tree-label'>{child}</div>;

    if (tooltip === undefined) {
        return label;
    }

    return (
        <Tooltip>
            <TooltipTrigger>{label}</TooltipTrigger>
            <TooltipContent>
                <div className='markdown'>
                    <Markdown remarkPlugins={[remarkGfm]}>
                        {tooltip}
                    </Markdown>
                </div>
            </TooltipContent>
        </Tooltip>
    );
}