// Libraries
import React from 'react';
import { configure, mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import checkProps from 'check-prop-types';
import waait from 'waait';
import { act } from 'react-dom/test-utils';

// Components
import { App as UnconnectedApp, listYfunc } from './App';

const reactUseState = React.useState;

configure({
  adapter: new EnzymeAdapter(),
  disableLifecycleMethods: true,
});

const defaultProps = {
  listX() {},
  listY() {},
  xText: undefined,
}

/**
 * @function setup
 * @param initialProps - wrapper initial props
 * @returns {ReactWrapper} - Enzyme `mount` ReactWrapper
 */
function setup(initialProps = defaultProps) {
  const wrapper = mount(
    <UnconnectedApp {...initialProps} />
  );
  console.log('wrapper', wrapper);
  console.log('wrapper.debug()', wrapper.debug());
  return wrapper;
}

/**
 * Return ShallowWrapper containing node(s) with the given data-test value.
 * @param {ShallowWrapper} wrapper - Enzyme shallow wrapper to search within
 * @param {string} val - Value of data-test attribute for search.
 * @return {ShallowWrapper}
 */
export function findByTestAttr(wrapper, val) {
  return wrapper.find(`[data-test="${val}"]`);
}

/**
 * Takes some expected props and see wether or not they would throw a warning.
 * The general idea is to give expected props to be good, and make sure they
 * do not throw a warning.
 * @param {React.Component} component - React component with propTypes property.
 * @param {object} conformingProps - Expected props object.
 * @returns {void}
 */
export function checkPropTypes(component, conformingProps) {
  const propError = checkProps(
    component.propTypes,
    conformingProps,
    'prop',
    component.name
  );
  expect(propError).toBeUndefined();
}

describe('renders', () => {
  const xText = 'xText';
  let listXMock = jest.fn().mockReturnValue();
  let wrapper;

  beforeEach(() => {
    wrapper = setup();
  });

  afterEach(() => {
    listXMock.mockClear();
  });

  it('renders app component', () => {
    const appComponent = findByTestAttr(wrapper, 'component-app');
    expect(appComponent.exists()).toBe(true);
  });

  it('renders loader placeholder', () => {
    const loader = findByTestAttr(wrapper, 'loader');
    expect(loader.exists()).toBe(true);
  });

  it('renders lazy-load button', () => {
    const lazyLoadButton = findByTestAttr(wrapper, 'lazy-load-button');
    expect(lazyLoadButton.exists()).toBe(true);
  })

  it('renders image-loader button', () => {
    const imageLoader = findByTestAttr(wrapper, 'image-loader');
    expect(imageLoader.exists()).toBe(true);
  })

  it('renders without prop type errors', () => {
    checkPropTypes(UnconnectedApp, defaultProps);
  });

  it('`listX` is called when mounted', () => {
    setup({
      ...defaultProps,
      listX: listXMock,
    });
    expect(listXMock).toHaveBeenCalledWith('React');
  });

  it('`listX` is called with xText prop if exists', () => {
    listXMock = jest.fn().mockReturnValue(xText);
    setup({
      ...defaultProps,
      listX: listXMock,
      xText,
    });
    expect(listXMock).toHaveBeenCalledWith(xText);
  });
});

describe('`listY` integration tests with React.useState & React.useEffect', () => {
  // Mocking listY & listY parameter
  const yText = 'yText';
  let listYMock = jest.fn(listYfunc);
  // Mocking React.useState
  let state;
  const setState = jest.fn((payload) => {
    state = payload;
  });

  beforeEach(() => {
    React.useState = jest.fn().mockReturnValue([state, setState]);
  })

  afterEach(() => {
    // Clearing mocks
    listYMock.mockClear();
    setState.mockClear();
    // Resetting module
    React.useState = reactUseState;
    state = undefined;
  });

  it('calls `listY` inside `React.useEffect`', async () => {
    setup({
      ...defaultProps,
      listY: listYMock
    });

    await act(async () => {
      await waait(500);
    });

    expect(listYMock).toHaveBeenCalled();
  });

  it('calls `listY` inside `React.useEffect` with `yText`', async () => {
    setup({
      ...defaultProps,
      listY: listYMock,
      yText
    });

    await act(async () => {
      await waait(500);
    });

    expect(listYMock.mock.calls[0][0]).toBe(yText);
  });

  it('calls `setState` after executing `listY`', async () => {
    setup({
      ...defaultProps,
      listY: listYMock
    });

    await act(async () => {
      await waait(500);
    });

    expect(setState).toHaveBeenCalled();
  });

  it('calls `setState` after executing `listY` with `yText` prop', async () => {
    setup({
      ...defaultProps,
      listY: listYMock,
      yText,
    });

    await act(async () => {
      await waait(500);
    });

    expect(setState).toHaveBeenCalledWith(yText.split('').reverse().join(''));
  });

  it('sets state correctly without `yText` parameter', async () => {
    setup({
      ...defaultProps,
      listY: listYMock,
    });

    await act(async () => {
      await waait(500);
    });

    expect(state).toBe('TypeScript > JavaScript'.split('').reverse().join(''));
  });

  it('sets state correctly with `yText` parameter', async () => {
    setup({
      ...defaultProps,
      listY: listYMock,
      yText,
    });

    await act(async () => {
      await waait(500);
    });

    expect(state).toBe(yText.split('').reverse().join(''));
  });
});

describe('`fetchImage` integration test with lazy-load-button', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = setup();
  });

  it('image-loader renders right text', () => {
    const imageLoader = findByTestAttr(wrapper, 'image-loader');
    expect(imageLoader.text()).toContain('Loading');
  });

  it('lazy-image is rendered after clicking the button', async () => {
    const lazyLoadButton = findByTestAttr(wrapper, 'lazy-load-button');
    expect(lazyLoadButton.exists()).toBe(true);

    await act(async () => {
      await waait(500);
    });


  });
})