import React from 'react';
import '@testing-library/jest-dom'
import { render, fireEvent, waitFor} from '@testing-library/react-native';
import { AtomInputText } from './index';
import 'jest-styled-components/native';
import { theme } from 'data/dataMx';

describe('[Native] AtomInputText', () => {
  const mockChange = jest.fn();
  const mockErrorCallback = jest.fn();
  it('Render AtomInputText mock change', () => {
    const component = render(<AtomInputText value='' onChange={mockChange()} />);
    fireEvent.changeText(component.getByTestId('input'), 'test')
    expect(mockChange).toHaveBeenCalled()
    const input = component.getByTestId('input');
    expect(input).toHaveStyleRule('border-color', `${theme.neutral400}`)
  });

  it('Render AtomInputText readOnly', () => {
    const component = render(<AtomInputText readOnly={true} />);
    const input = component.getByTestId('input');
    expect(input).toHaveStyleRule('border-color', `${theme.transparent}`)
  });

  it('Render AtomInputText disabled', () => {
    const component = render(<AtomInputText value='' disabled={true} />);
    const input = component.getByTestId('input');
    expect(input).toHaveStyleRule('border-color', `${theme.neutral300}`)
  });


  it('Rendered component change value', async () => {
    const component = render(
      <AtomInputText
        name={'name'}
        regex={'^[a-z]+$'}
        onChange={mockChange}
      />
    )
    const input = component.getByTestId('input');
    fireEvent(input, 'focus');
    fireEvent.changeText(input, 'qwerty');
    fireEvent(input, 'blur');
  });

  // it('Validate required', async () => {
  //   const component = render(
  //     <AtomInputText
  //       onChange={mockChange}
  //       errorCallback={mockErrorCallback}
  //       required={true}
  //     />
  //   )
  //   const input = component.getByTestId('input');
  //   fireEvent(input, 'focus');
  //   fireEvent(input, 'blur');
  //   await waitFor(() => expect(mockErrorCallback).toHaveBeenCalled());
  // });
});
