import ReactDOM from 'react-dom'
import ReactTestUtils from 'react-dom/test-utils'

import Summary from '../presenter'

import styles from '../styles.css'

describe('Common Stimulus Sidebar Summary Presenter', () => {
  const setSidebarStimulusIsShowingStub = sinon.stub()
  const props = {
    startPosition: 1,
    isDragging: false,
    isShowingItems: false,
    sidebarOpen: true,
    numberOfItems: 6,
    stimulusId: '1',
    setSidebarStimulusIsShowing: setSidebarStimulusIsShowingStub
  }
  const testbed = createTestbed(Summary, props)

  afterEach(() => {
    setSidebarStimulusIsShowingStub.resetHistory()
  })

  context('with more than 5 items', () => {
    context('isDragging', () => {
      it('renders a box with the word Included in message', () => {
        testbed.render({isDragging: true})
        expect(testbed.getText()).to.include('Included')
      })
    })

    context('isShowingItems', () => {
      it('renders a box with the word Collapse in message', () => {
        testbed.render({isShowingItems: true})
        expect(testbed.getText()).to.include('Collapse')
      })
    })

    it('renders a box with the word Expand in message', () => {
      testbed.render()
      expect(testbed.getText()).to.include('Expand')
    })

    it('renders the question count', () => {
      testbed.render()
      const questionCount = testbed.findChildrenByClass(styles.questionCount)[0]
      expect(questionCount.innerText).to.eq('Questions 1 - 6')
    })
  })

  context('with fewer than 6 items', () => {
    context('isDragging', () => {
      it('renders a box with the word Included in message', () => {
        testbed.render({isDragging: true, numberOfItems: 3})
        expect(testbed.getText()).to.include('Included')
      })

      context('with one item', () => {
        it('renders a box with the correct wording', () => {
          testbed.render({isDragging: true, numberOfItems: 1})
          expect(testbed.getText()).to.include('Question 1 Included')
        })
      })
    })

    it('renders an empty div', () => {
      testbed.render({numberOfItems: 5})
      expect(testbed.findChildrenByClass(styles.itemsContainer)).to.be.empty()
    })
  })

  it('sets showingItems to false when clicked and isShowingItems true', () => {
    testbed.render({isShowingItems: true})
    const container = ReactDOM.findDOMNode(testbed.findChildrenByClass(styles.summary)[0])
    ReactTestUtils.Simulate.click(container)
    expect(setSidebarStimulusIsShowingStub.calledWith('1', false)).to.be.true()
  })

  it('sets showingItems to true when clicked and isShowingItems false', () => {
    testbed.render()
    const container = ReactDOM.findDOMNode(testbed.findChildrenByClass(styles.summary)[0])
    ReactTestUtils.Simulate.click(container)
    expect(setSidebarStimulusIsShowingStub.calledWith('1', true)).to.be.true()
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', (done) => {
      testbed.render()
      testbed.checkA11yStandards(done)
    })
  })
})
