import React from 'react';
import { createMemoryHistory } from 'history';
import LoginForm from 'organisms/LoginForm';
import '@testing-library/jest-dom/extend-expect';
import { render, cleanup, waitForElement, fireEvent, act, wait } from '@testing-library/react';
import userApi from 'API/userAuthorization';

afterEach(cleanup);

describe('Login', () => {
  let history = createMemoryHistory({ initialEntries: ['/login'] });

  afterEach(() => (history = createMemoryHistory({ initialEntries: ['/login'] })));

  const dispatch = jest.fn();

  it('renders login form properly', async () => {
    const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
    const passwordField = await waitForElement(() => findByTestId('password-field'));
    const usernameField = await waitForElement(() => findByTestId('username-field'));
    const submitButton = await waitForElement(() => findByTestId('submit-button'));

    expect(submitButton.firstChild?.textContent).toBe('Zaloguj');
    expect(passwordField).toHaveValue('');
    expect(usernameField).toHaveValue('');
  });
  it('should display a blank login form', async () => {
    const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);

    const loginForm = await findByTestId('login-form');

    expect(loginForm).toHaveFormValues({
      username: '',
      password: '',
    });
  });
  it('should allow entering username and password', async () => {
    const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
    const passwordField = await waitForElement(() => findByTestId('password-field'));
    const usernameField = await waitForElement(() => findByTestId('username-field'));
    await act(async () => {
      fireEvent.change(passwordField, { target: { value: 'password' } });
      fireEvent.change(usernameField, { target: { value: 'username' } });
    });
    expect(passwordField).toHaveValue('password');
    expect(usernameField).toHaveValue('username');
  });
  it('should not submit blank form', async () => {
    const { findByTestId, getByText } = render(<LoginForm history={history} dispatch={dispatch} />);

    const loginForm = await findByTestId('login-form');
    fireEvent.submit(loginForm);

    const usernameError = await waitForElement(() => getByText('Podaj nazwę użytkownika.'));
    const passwordError = await waitForElement(() => getByText('Podaj hasło.'));

    expect(usernameError.innerHTML).toEqual('Podaj nazwę użytkownika.');
    expect(passwordError.innerHTML).toEqual('Podaj hasło.');
  });
  it('should submit form with given values and redirects', async () => {
    const { findByTestId, getByText } = render(<LoginForm history={history} dispatch={dispatch} />);
    const passwordField = await waitForElement(() => findByTestId('password-field'));
    const usernameField = await waitForElement(() => findByTestId('username-field'));
    const loginForm = await findByTestId('login-form');
    await act(async () => {
      fireEvent.change(passwordField, { target: { value: 'password' } });
      fireEvent.change(usernameField, { target: { value: 'username' } });
    });
    await act(async () => {
      fireEvent.submit(loginForm);
    });
    expect(userApi.userAuthorization).toHaveBeenCalledTimes(1);
    expect(history.location.pathname).toBe('/');
  });
  it('should display spinner on submitting form', async () => {
    const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
    const submitButton = await waitForElement(() => findByTestId('submit-button'));
    const passwordField = await waitForElement(() => findByTestId('password-field'));
    const usernameField = await waitForElement(() => findByTestId('username-field'));
    const loginForm = await findByTestId('login-form');
    await act(async () => {
      fireEvent.change(usernameField, { target: { value: 'username' } });
    });
    await act(async () => {
      fireEvent.change(passwordField, { target: { value: 'password' } });
    });

    fireEvent.submit(loginForm);
    expect(submitButton).toHaveClass('is-loading');
    await wait(() => expect(submitButton).not.toHaveClass('is-loading'));
  });
  it('should not redirect on invalid data', async () => {
    userApi.userAuthorization.mockReturnValueOnce(false);
    const { findByTestId } = render(<LoginForm history={history} dispatch={dispatch} />);
    const passwordField = await waitForElement(() => findByTestId('password-field'));
    const usernameField = await waitForElement(() => findByTestId('username-field'));
    const loginForm = await findByTestId('login-form');
    await act(async () => {
      fireEvent.change(passwordField, { target: { value: 'password' } });
    });
    await act(async () => {
      fireEvent.change(usernameField, { target: { value: 'username' } });
    });
    await act(async () => {
      fireEvent.submit(loginForm);
    });
    expect(history.location.pathname).toBe('/login');
  });
});