import React from 'react';
import { fireEvent } from '@testing-library/react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Modal from '../index';
import { noop } from '../../../fp/function';

window.scrollTo = jest.fn();

describe('rendering', () => {
  it('renders modal contents', () => {
    const { getByText } = renderWithTheme(
      <Modal title="A title" body="A body" footer="A footer" />
    );
    expect(getByText('A title')).toBeInTheDocument();
    expect(getByText('A body')).toBeInTheDocument();
    expect(getByText('A footer')).toBeInTheDocument();
  });

  it('allows to control the visibility', () => {
    const { getByText } = renderWithTheme(
      <Modal title="A title" body="A body" footer="A footer" open={false} />
    );
    expect(getByText('A title')).not.toBeVisible();
    expect(getByText('A body')).not.toBeVisible();
    expect(getByText('A footer')).not.toBeVisible();
  });

  it('allows to customise modal contents using react elements', () => {
    const { getByText } = renderWithTheme(
      <Modal
        title={<div>Customised title</div>}
        body={<div>Customised body</div>}
        footer={<div>Customised footer</div>}
      />
    );
    expect(getByText('Customised title')).toBeInTheDocument();
    expect(getByText('Customised body')).toBeInTheDocument();
    expect(getByText('Customised footer')).toBeInTheDocument();
  });

  describe('close button', () => {
    it('renders close button when onClose is defined', () => {
      const { queryByTestId } = renderWithTheme(
        <Modal
          title="A title"
          body="A body"
          footer="A footer"
          open
          onClose={noop}
        />
      );
      expect(queryByTestId('modal-close-button')).toBeInTheDocument();
    });

    it('DOES NOT renderWithTheme close button when onClose is undefined', () => {
      const { queryByTestId } = renderWithTheme(
        <Modal
          title="A title"
          body="A body"
          footer="A footer"
          open
          onClose={undefined}
        />
      );
      expect(queryByTestId('modal-close-button')).not.toBeInTheDocument();
    });
  });
});

describe('interaction', () => {
  it('allows to close the modal when clicking on the close button', () => {
    const onClose = jest.fn();
    const { getByTestId } = renderWithTheme(
      <Modal
        title="A title"
        body="A body"
        footer="A footer"
        open
        onClose={onClose}
      />
    );
    fireEvent.click(getByTestId('modal-close-button'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('allows to click on customised footer', () => {
    const onClick = jest.fn();
    const { getByText } = renderWithTheme(
      <Modal
        title="A title"
        body="A body"
        footer={
          <button type="button" onClick={(): void => onClick()}>
            Footer button
          </button>
        }
      />
    );
    fireEvent.click(getByText('Footer button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});