import type { FC } from 'react';
import React, { useRef, useState } from 'react';
import { Tooltip } from '@theorchard/suite-components';
import './select-truncated-text.scss';

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

export interface SelectTruncatedTextProps {
    maxWidth: number;
    placement?: TooltipPlacement;
    testId?: string;
    text: string;
}

const CLASS_NAME = 'SelectTruncatedText';

const SelectTruncatedText: FC<SelectTruncatedTextProps> = ({
    maxWidth,
    placement = 'bottom',
    testId,
    text,
}) => {
    const textRef = useRef<HTMLDivElement>(null);
    const [showTooltip, setShowTooltip] = useState<false | undefined>();

    const handleFocus = (element: HTMLElement) => {
        const isTruncated = element.offsetWidth < element.scrollWidth;
        setShowTooltip(isTruncated ? undefined : false);
    };

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

    return (
        <div className={CLASS_NAME}>
            <Tooltip
                className={CLASS_NAME}
                id={CLASS_NAME}
                message={text}
                placement={placement}
                show={showTooltip}
                testId={testId}
            >
                <div
                    className={`${CLASS_NAME}-inner`}
                    onMouseEnter={e => handleFocus(e.currentTarget)}
                    onFocus={e => handleFocus(e.currentTarget)}
                    onMouseLeave={handleBlur}
                    onBlur={handleBlur}
                    ref={textRef}
                    style={{ maxWidth }}
                >
                    {text}
                </div>
            </Tooltip>
        </div>
    );
};

export default SelectTruncatedText;