import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import GlobalMarketingHighlights from '../global-marketing-highlights';
import type { GlobalMarketingHighlightsProps } from '../global-marketing-highlights';

describe('<GlobalMarketingHighlights>', () => {
    const globalMarketingHighlights = 'global marketing highlights text';
    const defaultProps: GlobalMarketingHighlightsProps = {
        editable: true,
        globalMarketingHighlights,
        setGlobalMarketingHighlights: jest.fn(),
    };

    const renderWrapper = (
        props: Partial<GlobalMarketingHighlightsProps> = {}
    ) => render(<GlobalMarketingHighlights {...defaultProps} {...props} />);

    describe('Renders component', () => {
        test('Matches edit page snapshot', () => {
            const { container } = renderWrapper();
            expect(container).toMatchSnapshot();
        });
        test('Matches view page snapshot', () => {
            const { container } = renderWrapper({ editable: false });
            expect(container).toMatchSnapshot();
        });
    });

    describe('Text box tests', () => {
        test('calls setGlobalMarketingHighlights', async () => {
            const setGlobalMarketingHighlights = jest.fn();
            const { getByText } = renderWrapper({
                setGlobalMarketingHighlights,
            });
            const textArea = getByText(globalMarketingHighlights);
            const newText = 'test input';

            await act(async () => {
                await fireEvent.change(textArea, {
                    target: { value: newText },
                });
                await new Promise(f => setTimeout(f, 200));
            });

            expect(setGlobalMarketingHighlights).toHaveBeenCalledWith(newText);
        });
    });

    describe('Tooltip tests', () => {
        test('Hidden by default', async () => {
            const { queryByText } = renderWrapper();
            expect(
                await queryByText(
                    $t('marketingSection.globalMarketingHighlights.tooltip')
                )
            ).not.toBeInTheDocument();
        });

        test('tooltip text renders on hover', async () => {
            const { getByTestId, queryByText } = renderWrapper();
            const tooltipTrigger = getByTestId(
                'global-marketing-highlights-tooltip'
            );

            await act(async () => {
                await fireEvent.mouseOver(tooltipTrigger);
            });
            expect(
                await queryByText(
                    $t('marketingSection.globalMarketingHighlights.tooltip')
                )
            ).toBeInTheDocument();
        });
    });
});