import 'jest-dom/extend-expect';
import React from 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import Form from './form';

window.FormData = undefined;
require('formdata-polyfill');

describe('Form container', () => {
  afterEach(cleanup);

  it('passes an object with the form data to the onSubmit callback when the form is submitted', async () => {
    interface Response {
      'test-input': string;
      'test-input-2': string;
    }
    const handleSubmit = jest.fn();
    const form = render(
      <Form<Response>
        onSubmit={handleSubmit}
        render={() => (
          <fieldset>
            <label htmlFor="test-input">
              Test input
              <input type="text" name="test-input" id="test-input" />
            </label>
            <label htmlFor="test-input-2">
              Test input 2
              <input type="text" name="test-input-2" id="test-input-2" />
            </label>
            <button type="submit">Submit</button>
          </fieldset>
        )}
      />,
    );

    const testInput = form.getByLabelText('Test input');
    const submitButton = form.getByText('Submit');

    fireEvent.change(testInput, { target: { value: 'Test value' } });
    fireEvent.click(submitButton);

    expect(handleSubmit).toHaveBeenCalledWith({
      'test-input': 'Test value',
      'test-input-2': '',
    });
  });

  it('resolves promises returned by onSubmit', async () => {
    let submitPromise;
    const handleSubmit = () => {
      submitPromise = Promise.resolve({ a: 1 });
      return submitPromise;
    };

    const renderForm = jest.fn(() => <button type="submit">Submit</button>);

    const form = render(<Form onSubmit={handleSubmit} render={renderForm} />);

    const submitButton = form.getByText('Submit');
    fireEvent.click(submitButton);

    expect(renderForm.mock.calls[0]).toMatchObject([
      {
        data: {},
        formState: 'IDLE',
      },
    ]);

    expect(renderForm.mock.calls[1]).toMatchObject([
      {
        data: {},
        formState: 'LOADING',
      },
    ]);

    await submitPromise;

    expect(renderForm.mock.calls[2]).toMatchObject([
      {
        data: {},
        response: { a: 1 },
        formState: 'SUBMITTED',
      },
    ]);
  });

  it('passes error message to render', async () => {
    const error = new Error('Something went wrong');
    let submitPromise;
    const handleSubmit = () => {
      submitPromise = Promise.reject(new Error('Something went wrong'));
      return submitPromise;
    };

    const renderForm = jest.fn(() => <button type="submit">Submit</button>);

    const form = render(<Form onSubmit={handleSubmit} render={renderForm} />);

    const submitButton = form.getByText('Submit');
    fireEvent.click(submitButton);

    expect(renderForm.mock.calls[1]).toMatchObject([
      {
        data: {},
        formState: 'LOADING',
      },
    ]);

    // @ts-ignore
    await submitPromise.catch(() => {});

    expect(renderForm.mock.calls[2]).toMatchObject([
      {
        data: {},
        error,
        formState: 'FAILED',
      },
    ]);
  });

  it('tracks controlled components', () => {
    interface Response {
      uncontrolledInput: string;
      controlledInput1: string;
      controlledInput2: string;
    }
    const handleSubmit = jest.fn();
    const form = render(
      <Form<Response>
        onSubmit={handleSubmit}
        render={({ trackInput, trackedValues }) => (
          <fieldset>
            <label htmlFor="uncontrolledInput">
              Uncontrolled Input
              <input
                type="text"
                name="uncontrolledInput"
                id="uncontrolledInput"
                defaultValue="Default Value"
              />
            </label>
            <label htmlFor="controlledInput1">
              Controlled Input 1
              <input
                type="text"
                id="controlledInput1"
                value={trackedValues.controlledInput1}
                onChange={trackInput('controlledInput1')}
              />
            </label>
            <label htmlFor="controlledInput2">
              Controlled Input 2
              <input
                type="text"
                id="controlledInput2"
                value={trackedValues.controlledInput2}
                onChange={e => trackInput('controlledInput2')(e.target.value)}
              />
            </label>
            <button type="submit">Submit</button>
          </fieldset>
        )}
      />,
    );

    const uncontrolledInput = form.getByLabelText('Uncontrolled Input');
    const controlledInput1 = form.getByLabelText('Controlled Input 1');
    const controlledInput2 = form.getByLabelText('Controlled Input 2');
    const submitButton = form.getByText('Submit');

    fireEvent.change(uncontrolledInput, { target: { value: 'Test value 1' } });
    fireEvent.change(controlledInput1, { target: { value: 'Test value 2' } });
    fireEvent.change(controlledInput2, { target: { value: 'Test value 3' } });
    fireEvent.click(submitButton);

    expect(handleSubmit).toHaveBeenCalledWith({
      uncontrolledInput: 'Test value 1',
      controlledInput1: 'Test value 2',
      controlledInput2: 'Test value 3',
    });
  });

  it('sets default values on tracked inputs', () => {
    interface Response {
      uncontrolledInput: string;
      controlledInput1: string;
      controlledInput2: string;
    }
    const handleSubmit = jest.fn();
    const form = render(
      <Form<Response>
        onSubmit={handleSubmit}
        fields={{ controlledInput1: 'default value' }}
        render={({ fields: { controlledInput1, controlledInput2 } }) => (
          <fieldset>
            <label htmlFor="uncontrolledInput">
              Uncontrolled Input
              <input
                type="text"
                name="uncontrolledInput"
                id="uncontrolledInput"
                defaultValue="Default value 0"
              />
            </label>
            <label htmlFor="controlledInput1">
              Controlled Input 1
              <input
                type="text"
                id="controlledInput1"
                value={controlledInput1.value}
                onChange={controlledInput1.handler}
              />
            </label>
            <label htmlFor="controlledInput2">
              Controlled Input 2
              <input
                type="text"
                id="controlledInput2"
                value={controlledInput2.value}
                onChange={controlledInput2.handler}
              />
            </label>
            <button type="submit">Submit</button>
          </fieldset>
        )}
      />,
    );

    const submitButton = form.getByText('Submit');

    fireEvent.click(submitButton);

    expect(handleSubmit).toHaveBeenCalledWith({
      uncontrolledInput: 'Default value 0',
      controlledInput1: 'Default value 1',
      controlledInput2: '',
    });
  });

  it('does not override empty inputs with default values', () => {
    const handleSubmit = jest.fn();
    const form = render(
      <Form
        onSubmit={handleSubmit}
        defaultTrackedValues={{ controlledInput: 'Default value' }}
        render={({ trackedValues, trackInput }) => (
          <fieldset>
            <label htmlFor="controlledInput">
              Controlled Input 1
              <input
                type="text"
                id="controlledInput"
                value={trackedValues.controlledInput}
                onChange={trackInput('controlledInput')}
              />
            </label>
            <button type="submit">Submit</button>
          </fieldset>
        )}
      />,
    );

    const controlledInput = form.getByLabelText('Controlled Input 1');
    const submitButton = form.getByText('Submit');

    fireEvent.change(controlledInput, { target: { value: '' } });
    fireEvent.click(submitButton);

    expect(handleSubmit).toHaveBeenLastCalledWith({
      controlledInput: '',
    });
  });

  it('has attributes to fall back on when JS fails', () => {
    const formWrapper = render(
      <Form
        action="someurl"
        method="POST"
        onSubmit={() => {}}
        render={() => <input type="text" name="test-input" />}
      />,
    );

    const form = formWrapper.getByTestId('form');

    expect(form).toHaveAttribute('action', 'someurl');
    expect(form).toHaveAttribute('method', 'POST');
  });
});