import React from 'react';
import { Text } from 'react-native';
import { fireEvent, render, screen } from '@testing-library/react-native';
import Cta from '../Cta';
import themes from '../../../branding/themes';
import { BASE_THEME } from '../../../branding/constants/themes';
import useTheme from '../../../branding/hooks/useTheme';
import type { CtaIconProps } from '../types';

jest.mock('../../../branding/hooks/useTheme', () => ({
    __esModule: true,
    default: jest.fn()
}));

const currentTheme = themes[BASE_THEME];
const mockedUseTheme = useTheme as unknown as jest.Mock;

const MockIcon = ({ color, size }: CtaIconProps) => (
    <Text testID="mockIcon">{`${color}-${size}`}</Text>
);

describe('Cta', () => {
    const label = 'Report';

    beforeEach(() => {
        mockedUseTheme.mockImplementation(() => ({
            ...currentTheme,
            theme: BASE_THEME
        }));
    });

    afterEach(() => {
        jest.clearAllMocks();
    });

    it('renders the label as visible text', () => {
        render(<Cta icon={MockIcon} label={label} onPress={jest.fn()} />);

        expect(screen.getByText(label)).toBeTruthy();
    });

    it('fires onPress when pressed', () => {
        const onPress = jest.fn();
        render(<Cta icon={MockIcon} label={label} onPress={onPress} />);

        fireEvent.press(screen.getByLabelText(label));

        expect(onPress).toHaveBeenCalled();
    });

    it('exposes the given testID for querying', () => {
        const testID = 'reportCTA';
        render(
            <Cta
                icon={MockIcon}
                label={label}
                onPress={jest.fn()}
                testID={testID}
            />
        );

        expect(screen.getByTestId(testID)).toBeTruthy();
    });

    it('renders the icon with the default colour when not highlighted', () => {
        render(<Cta icon={MockIcon} label={label} onPress={jest.fn()} />);

        expect(
            screen.getByText(`${currentTheme.colors.gray0}-24`)
        ).toBeTruthy();
    });

    it('renders the icon with the highlighted colour when highlighted', () => {
        render(
            <Cta
                icon={MockIcon}
                label={label}
                onPress={jest.fn()}
                highlighted
            />
        );

        expect(
            screen.getByText(`${currentTheme.colors.starred}-24`)
        ).toBeTruthy();
    });
});