import React from 'react';
import 'jest-styled-components';
import '@testing-library/jest-dom';
import { render, fireEvent } from '@testing-library/react-native';
import { AtomLogo, logoSizes } from '.';
import { ILogoTheme, ILogoSize, ILogoText } from './types';

describe('[Native] AtomLogo', () => {
  test('Render logo', () => {
    const body = {
      size: 'large' as ILogoSize,
      logoTheme: 'monocromatic' as ILogoTheme,
      text: 'sided' as ILogoText,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon') as SVGSVGElement;
    expect(iconElement).not.toBeNull();
  });

  test('Render logo without text', () => {
    const body = {
      size: 'large' as ILogoSize,
      logoTheme: 'monocromatic' as ILogoTheme,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon') as SVGSVGElement;
    expect(iconElement).not.toBeNull();
  });

  test('Render logo light centered', () => {
    const body = {
      size: 'large' as ILogoSize,
      logoTheme: 'light' as ILogoTheme,
      text: 'centered' as ILogoText,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon') as SVGSVGElement;
    expect(iconElement).not.toBeNull();
  });

  test('Render logo dark sided', () => {
    const body = {
      size: 'large' as ILogoSize,
      logoTheme: 'dark' as ILogoTheme,
      text: 'sided' as ILogoText,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon') as SVGSVGElement;
    expect(iconElement).not.toBeNull();
  });

  test('Should have the correct height', () => {
    const body = {
      size: 'large' as ILogoSize,
      logoTheme: 'monocromatic' as ILogoTheme,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon');
    expect(iconElement.props.height.toString()).toEqual(
      `${logoSizes[body.size]}`
    );
  });

  test('onPress Logo with function and url', () => {
    const mockCallBack = jest.fn();
    const body = {
      url: 'https://google.com',
      onPress: mockCallBack,
      size: 'large' as ILogoSize,
      logoTheme: 'monocromatic' as ILogoTheme,
    };
    const element = render(<AtomLogo {...body} />);

    const iconElement = element.getByTestId('icon');

    fireEvent(iconElement, 'press');

    expect(mockCallBack).toHaveBeenCalledTimes(1);

  });
});
