import React from 'react';
import {
  render, fireEvent, screen, waitFor,
} from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

import SignUpPage from '.';

const signUpPage = render(
  <MemoryRouter>
    <SignUpPage />
  </MemoryRouter>,
);
const { getByTestId } = signUpPage;

const firstNameInput = signUpPage.getByPlaceholderText('First name');
const lastNameInput = signUpPage.getByPlaceholderText('Last name');
const emailInput = signUpPage.getByPlaceholderText('Email');
const passwordInput = signUpPage.getByPlaceholderText('Password(6 digits at least, case sensitive)');
const confirmPasswordInput = signUpPage.getByPlaceholderText('Confirm password');
const submitForm = signUpPage.getByTestId('signUpForm');

const mockValues = {
  firstName: 'qwe',
  lastName: 'qwe',
  correctEmail: 'qwe@gmail.com',
  incorrectEmail: 'hinagawa@gmail.com',
  password: 'Qwerty007',
  incorrectConfirmPassword: 'Qwerty000',
  confirmPassword: 'Qwerty007',
};

it('should render correctly', () => {
  const { asFragment } = signUpPage;
  expect(asFragment()).toMatchSnapshot();
});

it('should call onSubmit 1 time when we submit form', () => {
  const handleSubmit = jest.fn();
  submitForm.onsubmit = handleSubmit;
  fireEvent.submit(submitForm);
  expect(handleSubmit).toHaveBeenCalledTimes(1);
});

it('should find error message if password and confirm password do not match', async () => {
  fireEvent.change(firstNameInput, { target: { value: mockValues.firstName } });
  fireEvent.change(lastNameInput, { target: { value: mockValues.lastName } });
  fireEvent.change(emailInput, { target: { value: mockValues.correctEmail } });
  fireEvent.change(passwordInput, { target: { value: mockValues.password } });
  fireEvent.change(
    confirmPasswordInput,
    { target: { value: mockValues.incorrectConfirmPassword } },
  );

  const handleSubmit = jest.fn();
  submitForm.onsubmit = handleSubmit;
  await waitFor(() => {
    fireEvent.submit(submitForm);
  });
  expect(screen.queryByText(/Password and confirm password don't match/i)).toBeInTheDocument();
});

it('check error handling', () => {
  const form = getByTestId('FORM');
  expect(screen.queryByText(/Entered passwords do not match!/i)).toBeNull();
  fireEvent.change(screen.getByPlaceholderText('Password (6 digits at least, case sensetive)'), {
    target: { value: 'TestPassword123!' },
  });
  fireEvent.change(screen.getByPlaceholderText('Confirm password'), {
    target: { value: 'TestPassword123!!' },
  });
  fireEvent.submit(form);
  expect(screen.queryByText(/Entered passwords do not match!/i)).toBeInTheDocument();
});

it('should find error message when we pass email which already exist', async () => {
  fireEvent.change(firstNameInput, mockValues.firstName);
  fireEvent.change(lastNameInput, mockValues.lastName);
  fireEvent.change(emailInput, { target: { value: mockValues.incorrectEmail } });
  fireEvent.change(passwordInput, { target: { value: mockValues.password } });
  fireEvent.change(
    confirmPasswordInput,
    { target: { value: mockValues.confirmPassword } },
  );
  await waitFor(() => {
    fireEvent.submit(submitForm);
  });
  expect(screen.getByText('User with this email already exist')).toBeInTheDocument();
});