import React from 'react';
import { render, screen, act, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useForm } from 'react-hook-form';
import { createWrapper } from '__tests__/wrapper';
import { en } from 'ui/messages';
import { ForgotPasswordSubmit } from 'ports/auth/forgotPasswordSubmit';
import { ForgotPassword } from 'ports/auth/forgotPassword';
import Recovery from '../Recovery';
import { Values } from '../types';

const setup = () => {
  const onForgotPassword = jest.fn();
  const onForgotPasswordSubmit = jest.fn();

  const Provider: React.FC = () => {
    const formProps = useForm<Values>();
    return (
      <Recovery
        formProps={formProps}
        submitting={false}
        onForgotPassword={onForgotPassword}
        onForgotPasswordSubmit={onForgotPasswordSubmit}
      />
    );
  };

  const wrapper = createWrapper({
    messages: en,
    inject(jpex) {
      jpex.constant<ForgotPassword>(onForgotPassword);
      jpex.constant<ForgotPasswordSubmit>(onForgotPasswordSubmit);
    },
    render: () => {
      return <Provider />;
    },
  });
  return { wrapper, onForgotPassword, onForgotPasswordSubmit };
};

describe('testing password recovery page', () => {
  it('should run useForgotPassword on submit of RESET step', async () => {
    const { wrapper, onForgotPassword } = setup();
    await act(async () => {
      render(<div />, { wrapper });
      await userEvent.type(
        screen.getByLabelText('Email Address'),
        'user@email.com'
      );
      await userEvent.click(screen.getByText('Next'));
    });

    // expect(onForgotPassword).toBeCalledWith('user@email.com');
    expect(onForgotPassword).toHaveBeenCalled();
  });
});