import React from 'react';
import ReactDOM from 'react-dom';
import { render, cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { act } from 'react-dom/test-utils';
import { contactUsForm, newsLetterForm } from '../../../constants/forms';

import Form from '.';

describe('Form Component', () => {
  test('render contact form ', () => {
    const { container } = render(
      <Form
        formOptions={contactUsForm.ie_en}
        hasButton
        type="contact"
        submitUrl="https://submit-form.com"
      />
    );
    expect(container.querySelector('input[type="text"]')).toBeTruthy();
    expect(container.querySelector('input[type="email"]')).toBeTruthy();
    expect(container.querySelector('textarea')).toBeTruthy();
    expect(container.querySelector('label')).toBeTruthy();
    expect(container.querySelectorAll('label').length).toEqual(5);
    expect(container.querySelector('.primary')).toBeTruthy();
  });
  test('render newsletter form ', () => {
    const { container } = render(
      <Form
        formOptions={newsLetterForm.ie_en}
        hasButton
        type="newsletter"
        submitUrl="https://submit-form.com"
      />
    );
    expect(container.querySelector('input[type="text"]')).toBeTruthy();
    expect(container.querySelector('input[type="email"]')).toBeTruthy();
    expect(container.querySelector('textarea')).toBeFalsy();
    expect(container.querySelector('.primary')).toBeTruthy();
  });
  test('render form without labels ', () => {
    const { container } = render(
      <Form
        formOptions={contactUsForm.ie_en}
        hasButton
        type="contact"
        submitUrl="https://submit-form.com"
        showLabels={false}
      />
    );
    expect(container.querySelectorAll('input[type="text"]').length).toEqual(2);
    expect(container.querySelector('textarea')).toBeTruthy();
    expect(container.querySelector('.formGroup').querySelector('label')).toBeFalsy();
    expect(container.querySelectorAll('label').length).toEqual(1);
  });
  test('on change', async () => {
    render(
      <Form
        formOptions={contactUsForm.ie_en}
        hasButton
        type="contact"
        submitUrl="https://submit-form.com"
      />
    );
    const input = document.querySelector('input[type="text"]');
    const messageInput = document.querySelector('textarea');

    await waitFor(() => {
      fireEvent.change(input, { target: { value: 'Mohsen' } });
      fireEvent.change(messageInput, { target: { value: 'EKKK' } });
      expect(input.value).toBe('Mohsen');
      expect(messageInput.value).toBe('EKKK');
    }, 3000);
  });

  test('handle submit', async () => {
    const container = document.createElement('div');
    act(() => {
      ReactDOM.render(
        <Form
          formOptions={contactUsForm.ie_en}
          hasButton
          type="contact"
          submitUrl="https://submit-form.com"
        />,
        container
      );
    });
    const button = container.querySelector('.primary');
    const ApiCall = jest.fn();
    screen.postData = new ApiCall();
    act(() => {
      fireEvent.click(button);
    });
    expect(ApiCall).toHaveBeenCalled();
  });

  test('handle submit with filled fields', async () => {
    const { container } = render(
      <Form
        formOptions={newsLetterForm.ie_en}
        hasButton
        disabled={false}
        type="newsletter"
        submitUrl="https://submit-form.com"
      />
    );
    const nameInput = document.querySelector('input[type="text"]');
    const emailInput = document.querySelector('input[type="email"]');

    await waitFor(() => {
      fireEvent.change(nameInput, { target: { value: 'Val' } });
      fireEvent.change(emailInput, { target: { value: 'ejk@sl.com' } });

      expect(nameInput.value).toBe('Val');
    }, 3000);

    const formElement = container.querySelector('form');
    fireEvent.submit(formElement);
  });
});
afterEach(() => {
  cleanup();
});
