import { DocumentsPoolPage } from './documentsPool.page';
import configureStore from 'redux-mock-store';
import React from 'react';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import ReactTestRenderer from 'react-test-renderer';
import { getScreenWidth } from '../../../shared/store/ui/uiSelectors';
import { OutputSelector } from 'reselect';
import { StoreState } from '../../../common/store/store.types';
import { DocumentCategory, DocumentWithCategory } from '../store/documents.types';
import { selectCategories, selectDocuments } from '../store/documents.selectors';
import { createDocumentCategories, createDocuments } from '../../../testUtils/mocks/document.mock';

jest.mock('../store/documents.selectors', () => ({
  selectDocumentBookmarks: jest.fn(() => [0, 1, 2]),
  selectDocumentsIsMoreStatus: jest.fn(() => true),
  selectDocumentsLoadingStatus: jest.fn(() => false),
  selectDocumentsViewList: jest.fn(() => []),
  selectDocuments: jest.fn(() => []),
  selectDocumentBookmarksLoadingStatus: jest.fn(() => false),
  selectCategories: jest.fn(() => []),
  selectDocumentsBookmarksFilter: jest.fn(() => false),
  selectDocumentsCategoryFilter: jest.fn(() => []),
}));

jest.mock('app/shared/store/ui/uiSelectors', () => ({
  getScreenWidth: jest.fn(() => 320),
}));

describe('DocumentsPool page tests', () => {
  const initialState = {
    filters: {},
  };
  const mockStore = configureStore();
  let store;

  beforeEach(() => {
    store = mockStore(initialState);
  });

  it('renders filters collapsible for mobile', () => {
    (getScreenWidth as jest.MockedFunction<OutputSelector<StoreState, number, jest.Mock>>)
      .mockImplementation(() => 320);
    (selectDocuments as jest.MockedFunction<OutputSelector<StoreState, DocumentWithCategory[], jest.Mock>>)
      .mockImplementation(() => createDocuments());

    const wrapper = ReactTestRenderer.create(<Provider store={store}>
      <MemoryRouter>
        <DocumentsPoolPage />
      </MemoryRouter>
    </Provider>);

    const instance =wrapper.root;

    expect(instance.findAllByProps({ id: 'mobile-filters' }).length).toBe(1);
  });

  it('does not render filters collapsible for desktop', () => {
    (getScreenWidth as jest.MockedFunction<OutputSelector<StoreState, number, jest.Mock>>)
      .mockImplementation(() => 2000);
    (selectDocuments as jest.MockedFunction<OutputSelector<StoreState, DocumentWithCategory[], jest.Mock>>)
      .mockImplementation(() => createDocuments());
    (selectCategories as jest.MockedFunction<OutputSelector<StoreState, DocumentCategory[], jest.Mock>>)
      .mockImplementation(() => createDocumentCategories());

    const wrapper = ReactTestRenderer.create(<Provider store={store}>
      <MemoryRouter>
        <DocumentsPoolPage />
      </MemoryRouter>
    </Provider>);

    const instance =wrapper.root;

    expect(instance.findAllByProps({ id: 'mobile-filters' }).length).toBe(0);
  });
});