import React from 'react';
import { AtomButtonOutline } 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('[Native] AtomButtonOutline', () => {
  test('Render button', () => {
    const body = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    expect(component).toBeTruthy();
  });

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

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

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

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

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

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

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

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

  test('Render button disabled color', () => {
    const body = {
      disabled: true,
      color: 'primary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');
    expect(element.props.style).toMatchObject({
      backgroundColor: theme.neutral200,
    });
  });
  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(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-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(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');

    expect(element.props.style.height).toBe(64);
  });
  test('Render button onPress custom color', () => {
    const body : IButtonProps = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'tertiary',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');
    fireEvent.press(element);
    
    expect(element.props.style).toMatchObject({
      backgroundColor: theme.transparent,
      borderColor: theme.tertiary100,
      borderRadius: 4,
      borderWidth: 4,
      display: "flex",
      height: 32,
      justifyContent: "center",
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      marginTop: 0,
      opacity: 1,
      paddingBottom: 8,
      paddingLeft: 24,
      paddingRight: 24,
      paddingTop: 8,
      textAlign: "center",
      width: 144,
    });
  });

  test('Render button onPress primary color', () => {
    const body : IButtonProps = {
      disabled: false,
      color: 'primary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');
    fireEvent.press(element);
    
    expect(element.props.style).toMatchObject({
      backgroundColor: "transparent",
      borderColor: theme.tertiary100,
      borderRadius: 4,
      borderWidth: 4,
      display: "flex",
      height: 32,
      justifyContent: "center",
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      marginTop: 0,
      opacity: 1,
      paddingBottom: 8,
      paddingLeft: 24,
      paddingRight: 24,
      paddingTop: 8,
      textAlign: "center",
      width: 144,
    });
  });

  test('Render button onPress secondary color', () => {
    const body : IButtonProps = {
      disabled: false,
      color: 'secondary',
      text: 'Accept',
      width: '144px',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');
    fireEvent.press(element);
    
    expect(element.props.style).toMatchObject({
      backgroundColor: theme.transparent,
      borderColor: theme.tertiary100,
      borderRadius: 4,
      borderWidth: 4,
      display: "flex",
      height: 32,
      justifyContent: "center",
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      marginTop: 0,
      opacity: 1,
      paddingBottom: 8,
      paddingLeft: 24,
      paddingRight: 24,
      paddingTop: 8,
      textAlign: "center",
      width: 144,
    });
  });

  test('Render button pressOut custom color tertiary', () => {
    const body : IButtonProps = {
      disabled: false,
      color: 'custom',
      text: 'Accept',
      width: '144px',
      customColor: 'tertiary',
    } as const;
    let component = render(
      
        <AtomButtonOutline {...body} />
      
    );
    const element = component.getByTestId('out-btn');
    fireEvent(element, 'pressOut');
    
    expect(element.props.style).toMatchObject({
      backgroundColor: theme.transparent,
      borderColor: theme.tertiary,
      borderRadius: 4,
      borderWidth: 2,
      display: "flex",
      height: 32,
      justifyContent: "center",
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      marginTop: 0,
      opacity: 1,
      paddingBottom: 8,
      paddingLeft: 24,
      paddingRight: 24,
      paddingTop: 8,
      textAlign: "center",
      width: 144,
    });
  });
});
