import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import TruncatedText, {
    TruncatedTextProps,
    TooltipPlacement,
} from 'src/components/shared/truncated-text';
import { getAccountDetail } from 'src/urls/frontend-royalties';

describe('<TruncatedText>', () => {
    const render = (props: TruncatedTextProps) =>
        renderInAppContext(<TruncatedText {...props} />);

    it("doesn't render tooltip when not truncated and on hover", () => {
        const props = {
            value: 'Testing',
            useLink: true,
        };
        render(props);

        const element = screen.getByText('Testing');
        fireEvent.mouseEnter(element);

        const tooltip = screen.queryByRole('tooltip');
        expect(tooltip).toBeNull();
    });

    it('renders tooltip when truncated and on hover', async () => {
        const props = {
            value: 'Across The White Water Tower',
            useLink: true,
            maxLength: 14,
        };
        render(props);
        const element = await screen.findByText('Across The Whi...');
        fireEvent.mouseEnter(element);

        const tooltip = await screen.findByTestId('TruncatedText-tooltip');
        expect(tooltip).toBeVisible();
    });

    it('renders link when useLink prop is true and routeUrl is passed', async () => {
        const props = {
            value: 'Testing',
            useLink: true,
            routeUrl: getAccountDetail(123),
        };
        render(props);
        expect(screen.getByText('Testing').closest('a')?.href).toEqual(
            `http://testurl.com${getAccountDetail(123)}`
        );
    });

    it("doesn't render link when useLink prop is false", async () => {
        const props = {
            value: 'Testing',
            useLink: false,
            routeUrl: getAccountDetail(123),
        };
        render(props);

        const link = screen.getByText('Testing').closest('a');
        expect(link).toBeNull();
    });

    const placements: TooltipPlacement[] = ['right', 'left', 'bottom', 'top'];
    describe.each(placements)('when placement is set to "%s"', placement => {
        it('renders tooltip in that position', async () => {
            const props = {
                value: 'Across The White Water Tower',
                useLink: true,
                maxLength: 14,
                placement,
            };
            render(props);

            const element = await screen.findByText('Across The Whi...');
            fireEvent.mouseEnter(element);

            const tooltip = await screen.findByTestId('TruncatedText-tooltip');
            expect(tooltip).toHaveClass('Tooltip');
        });
    });
});