import type { FC } from 'react';
import React, { useRef, useState } from 'react';
import { Tooltip } from '@theorchard/suite-components';
import { Link } from 'react-router-dom';

export type TooltipPlacement = 'top' | 'bottom' | 'right' | 'left';

export interface TruncatedTextProps {
    value: string;
    useLink?: boolean;
    maxLength?: number;
    placement?: TooltipPlacement;
    onClick?: () => void;
    testId?: string;
    routeUrl?: string;
}

const CLASS_NAME = 'TruncatedText';

const TruncatedText: FC<TruncatedTextProps> = ({
    value,
    useLink,
    maxLength,
    placement = 'bottom',
    onClick,
    testId,
    routeUrl,
}) => {
    const [showTooltip, setShowTooltip] = useState(false);
    const target = useRef<HTMLDivElement>(null);

    const isValueOverflow = !!maxLength && !!value && value.length > maxLength;
    const text =
        value && isValueOverflow
            ? `${value.substring(0, maxLength)}...`
            : value || '';

    const handleFocus = (element: HTMLElement) => {
        const isOverflowing = element.offsetWidth < element.scrollWidth;
        setShowTooltip(isOverflowing || isValueOverflow);
    };

    const handleBlur = () => setShowTooltip(false);

    const overlay = showTooltip ? (
        <Tooltip
            id={CLASS_NAME}
            placement={placement}
            testId="TruncatedText-tooltip"
            message={value}
        >
            <div className={`${CLASS_NAME}-inner`} ref={target}>
                {text}
            </div>
        </Tooltip>
    ) : (
        text
    );

    return useLink && routeUrl ? (
        <Link
            className={CLASS_NAME}
            to={routeUrl}
            data-testid={testId}
            onClick={onClick}
            onMouseEnter={e => handleFocus(e.currentTarget)}
            onFocus={e => handleFocus(e.currentTarget)}
            onMouseLeave={handleBlur}
            onBlur={handleBlur}
        >
            {overlay}
        </Link>
    ) : (
        <div
            className={CLASS_NAME}
            data-testid={testId}
            onMouseEnter={e => handleFocus(e.currentTarget)}
            onFocus={e => handleFocus(e.currentTarget)}
            onMouseLeave={handleBlur}
            onBlur={handleBlur}
        >
            {overlay}
        </div>
    );
};

export default TruncatedText;