import React from 'react';
import { AtomButtonDefault } from './index';
import { render, fireEvent } from '@testing-library/react-native';
import { theme } from 'data/dataMx';
import { IButtonProps } from '../ButtonProps';
import { ReactTestInstance } from 'react-test-renderer';

describe('Button Default', () => {
  test('Render button', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    expect(component).toBeTruthy();
  });

  test('Render button without width', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    expect(component).toBeTruthy();
  });

  test('Button clicked', () => {
    const handlePress = jest.fn();
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      width: '244px',
      onPress: handlePress,
    } as const;

    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const text = component.queryByTestId('df-btn') as ReactTestInstance;
    fireEvent.press(text);
    expect(handlePress).toHaveBeenCalledTimes(1);
  });
  test('Button disabled clicked', () => {
    const handlePress = jest.fn();
    const body = {
      disabled: true,
      color: 'secondary',
      text: 'Accept',
      width: '244px',
      onPress: handlePress,
    } as const;

    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const text = component.queryByTestId('df-btn') as ReactTestInstance;
    fireEvent.press(text);
    expect(handlePress).toHaveBeenCalledTimes(0);
  });
  test('Render button primary color', () => {
    const body = {
      disabled: false,
      color: 'primary',
      text: 'Accept',
      width: '144px',
    } as const;

    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.primary,
    });
  });

  test('Render button secondary color', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.secondary,
    });
  });

  test('Render button custom color', () => {
    const body = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'tertiary',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.tertiary,
    });
  });

  test('Render button custom light style', () => {
    const body = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'light',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral100,
    });
  });
  test('Render button custom dark style', () => {
    const body = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'dark',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral700,
    });
  });
  test('Render button custom neutral style', () => {
    const body = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'neutral',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral500,
    });
  });
  test('Render button custom neutral style disabled', () => {
    const body = {
      disabled: true,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'neutral',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral200,
    });
  });

  test('Render button custom light press', () => {
    const body : IButtonProps= {
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'light',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    fireEvent.press(element);

    expect(element.props.style).toMatchObject({
      backgroundColor: theme.neutral200,
    });
  });
  test('Render button custom neutral press', () => {
    const body : IButtonProps= {
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'neutral',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    fireEvent.press(element);

    expect(element.props.style).toMatchObject({
      backgroundColor: theme.neutral700,
    });
  });
  test('Render button custom dark press', () => {
    const body : IButtonProps= {
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'dark',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    fireEvent.press(element);

    expect(element.props.style).toMatchObject({
      backgroundColor: theme.neutral700,
    });
  });
  test('Render button custom senary press', () => {
    const body : IButtonProps= {
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    fireEvent.press(element);

    expect(element.props.style).toMatchObject({
      backgroundColor: theme.senary300,
    });
  });
  test('Button onPressOut', async () => {
    const body : IButtonProps= {
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');
    fireEvent(element, 'pressOut');

    expect(element.props.style.backgroundColor).toBe(theme.senary);
  });

  test('Button size small', async () => {
    const body : IButtonProps= {
      size: 'small',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    expect(element.props.style.height).toBe(32);
  });
  test('Button size large', async () => {
    const body : IButtonProps= {
      size: 'large',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonDefault {...body} />
      
    );
    const element = component.getByTestId('df-btn');

    expect(element.props.style.height).toBe(64);
  });
});
