import React from 'react';
import { AtomButtonIcon, IIconButtonProps } from './index';
import { render, fireEvent } from '@testing-library/react-native';
import { theme } from 'data/dataMx';

describe('[Native] AtomButtonIcon ', () => {
  test('Render button icon with text', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '64px',
      shape: 'default'
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    expect(component).toBeTruthy();
  });

  test('Render button without text', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      icon: 'chevron-left',
      width: '64px',
      text: '',
      shape: 'circle'
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon');
    expect(element).not.toBe(null);
  });

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

  test('Render button aligned left', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '64px',
      iconAlign: 'left',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    expect(component).toBeTruthy();
  });

  test('Render button aligned left', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '64px',
      iconAlign: 'right',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    expect(component).toBeTruthy();
  });

  test('Render button with icon color', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '64px',
      iconAlign: 'left',
      iconColor: 'red',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    expect(component).toBeTruthy();
  });

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

    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const text = component.queryByTestId('icon-btn')
    fireEvent.press(text);
    expect(handlePress).toHaveBeenCalledTimes(1);
  });

  test('Render button primary color', () => {
    const body = {
      disabled: false,
      color: 'primary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '64px',
    } as const;

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

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

  test('Render button custom color', () => {
    const body = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      icon: 'chevron-left',
      customColor: 'tertiary',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-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',
      icon: 'chevron-left',
      customColor: 'light',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-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',
      icon: 'chevron-left',
      customColor: 'dark',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-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',
      icon: 'chevron-left',
      customColor: 'neutral',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral400,
    });
  });

  test('Render button custom neutral style disabled', () => {
    const body = {
      disabled: true,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      icon: 'chevron-left',
      customColor: 'neutral',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral200,
    });
  });
  test('Button size small', async () => {
    const body : IIconButtonProps= {
      icon:'chevron-left',
      size: 'small',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');

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

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

  test('Button size medium', async () => {
    const body : IIconButtonProps= {
      icon:'chevron-left',
      size: 'medium',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');

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

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

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

  test('Button size medium iconAlign left', async () => {
    const body : IIconButtonProps= {
      icon:'chevron-left',
      size: 'medium',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
      iconAlign: 'left'
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');

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

  test('Button size large iconAlign left', async () => {
    const body : IIconButtonProps= {
      icon:'chevron-left',
      size: 'large',
      disabled:false,
      text:'Accept',
      color: 'custom',
      customColor: 'senary',
      width: '144px',
      iconAlign: 'left'
    } as const;
    let component = render(
      
        <AtomButtonIcon {...body} />
      
    );
    const element = component.getByTestId('icon-btn');

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

  test('Render button pressOut not disabled', () => {
    const body = {
      disabled: false,
      color: 'primary',
      text: 'Accept',
      icon: 'chevron-left',
      width: '48px'
    } as const;

    let component = render(
      
        <AtomButtonIcon iconAlign='right' {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    fireEvent(element, 'pressOut');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.primary,
    });
  });
  test('Render button pressOut disabled', () => {
    const body = {
      disabled: true,
      color: 'primary',
      text: 'Accept',
      icon: 'chevron-left',
    } as const;

    let component = render(
      
        <AtomButtonIcon iconAlign='right' {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    fireEvent(element, 'pressOut');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral200,
    });
  });

  test('Render button press', () => {
    const body : IIconButtonProps = {
      icon:'chevron-left',
      disabled: false,
      color: 'custom',
      text: 'Accept',
      customColor: 'neutral',
      width: '48px'
    } as const;

    let component = render(
      
        <AtomButtonIcon iconAlign='right' {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    fireEvent.press(element);
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral700,
    });
  });

  test('Render button press', () => {
    const body : IIconButtonProps = {
      icon:'chevron-left',
      disabled: true,
      color: 'custom',
      text: 'Accept',
      customColor: 'neutral',
      width: '48px'
    } as const;

    let component = render(
      
        <AtomButtonIcon iconAlign='left' {...body} />
      
    );
    const element = component.getByTestId('icon-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.neutral200,
    });
  });

  test('Render button press disable false and typeButtonIcon ghost', () => {
    const body : IIconButtonProps = {
      icon:'chevron-left',
      disabled: false,
      color: 'custom',
      text: 'Accept',
      customColor: 'neutral',
      width: '48px',
      typeButtonIcon: 'ghost',
    } as const;

    let component = render(
      <AtomButtonIcon iconAlign='left' {...body} />
    );
    const element = component.getByTestId('icon-btn');
    fireEvent(element, 'press');
    
    expect(element.props.style).toMatchObject({
      backgroundColor: theme?.transparent,
    });
  });
});
