import React from 'react'
import { shallow, mount } from 'enzyme'
import { MemoryRouter, Router } from '@docusaurus/router'
import styles from './Categories.module.css'
import homepageCategories from '../../../homepage-categories'
import CategoriesContainer from './CategoriesContainer'
// import { act } from 'react-dom/test-utils'
import CategoriesComponent from "./CategoriesComponent"
import { createMemoryHistory } from 'history'


describe('CategoriesContainer', () => {
  jest.useFakeTimers()
  beforeEach(() => {
    jest.clearAllTimers()
    jest.clearAllMocks()
  })
  it('renders successfully', () => {
    const wrapper = shallow(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
    expect(wrapper).not.toBeNull()
  })

  it('contains the homepage categories as default props', () => {
    const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
    expect(wrapper.find('CategoriesContainer').prop('homepageCategories')).toEqual(homepageCategories)
    wrapper.unmount()
  })

  it(`should render with ${homepageCategories.length} CategoryComponent instances`, () => {
    const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
    const categoriesContainer = wrapper.find('CategoriesContainer')
    expect(categoriesContainer.find('CategoriesComponent')).toHaveLength(homepageCategories.length)
    wrapper.unmount()
  })

  // it('should render 18 categories when the load more button is clicked', () => {
  //   const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
  //   const categoriesContainer = wrapper.find('CategoriesContainer')
  //   expect(categoriesContainer.find('CategoriesComponent')).toHaveLength(9)
  //   expect(categoriesContainer.find(`.${styles.categories}`)).toHaveLength(1)
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`)).toHaveLength(1)
  //   expect(categoriesContainer.find(`.${styles.loadMoreBtn}`)).toHaveLength(1)
  //   expect(categoriesContainer.find(`.${styles.loadMoreBtnDark}`)).toHaveLength(1)
  //   act(() => {
  //     categoriesContainer.find(`.${styles.loadMoreBtn}`).simulate('click')
  //     jest.runAllTimers()
  //   })
  //   wrapper.update()
  //   expect(wrapper.find('CategoriesContainer').find('CategoriesComponent')).toHaveLength(18)
  //   wrapper.unmount()
  // })

  // it('displays total number of categories once all have been loaded', () => {
  //   const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
  //   const categoriesContainer = wrapper.find('CategoriesContainer')
  //   const loadMoreBtn = categoriesContainer.find(`.${styles.loadMoreBtn}`)
  //   const divisionCount = Math.floor(homepageCategories.length / 9)
  //   for (let i = 0; i <= divisionCount + 1; i++) {
  //     act(() => {
  //       loadMoreBtn.simulate('click')
  //       jest.runAllTimers()
  //     })
  //   }
  //   wrapper.update()
  //   const expectedText = `Total of ${homepageCategories.length} categories loaded.`
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`)).toHaveLength(1)
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`).text()).toEqual(expectedText)
  //   wrapper.unmount()
  // })

  // it('displays loading spinner when load more button is clicked', () => {
  //   const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={homepageCategories} /></MemoryRouter>)
  //   const categoriesContainer = wrapper.find('CategoriesContainer')
  //   const loadMoreBtn = categoriesContainer.find(`.${styles.loadMoreBtn}`)
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`).text()).toEqual('Load more...')
  //   act(() => {
  //     loadMoreBtn.simulate('click')
  //     jest.advanceTimersByTime(100)
  //     wrapper.update()
  //   })
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`).text()).toEqual('')
  //   act(() => {
  //     jest.advanceTimersByTime(1500)
  //     wrapper.update()
  //   })
  //   expect(categoriesContainer.find(`.${styles.postCategoryAction}`).text()).toEqual('Load more...')
  //   wrapper.unmount()
  // })

  it('display no categories text when there are no categories to show', () => {
    const wrapper = mount(<MemoryRouter initialEntries={['/']}><CategoriesContainer homepageCategories={[]} /></MemoryRouter>)
    const categoriesContainer = wrapper.find('CategoriesContainer')
    expect(categoriesContainer.find(`.${styles.postCategoryAction}`).text()).toEqual('No categories to load')
    wrapper.unmount()
  })

  describe('renders unique links to each category', () => {
    const history = createMemoryHistory()
    const wrapper = mount(
      <Router history={history} initialEntries={['/']}>
        <CategoriesContainer homepageCategories={homepageCategories} />
      </Router>
    )
    const categoriesContainer = wrapper.find('CategoriesContainer')
    homepageCategories.filter((e,i) => i >= 0 && i <= homepageCategories.length)
      .map((props, idx) => {
        it(`${idx}. navigates to the correct URI: ${props.uri}`, () => {
          const categoryComponent = categoriesContainer.find('CategoriesComponent').at(idx)
          categoryComponent.simulate('click')
          expect(history.location.pathname).toEqual(props.uri)
        })
      })
    wrapper.unmount()
  })
})