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

import Button from '@instructure/ui-buttons/lib/components/Button'
import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
import Breadcrumb from '@instructure/ui-breadcrumb/lib/components/Breadcrumb'
import BreadcrumbLink from '@instructure/ui-breadcrumb/lib/components/Breadcrumb/BreadcrumbLink'

import { shouldRenderComponent } from '../../../../../tests/util/renderChecks'

import NavWrapper from '../index'

describe('NavWrapper', () => {
  const closeTrayStub = sinon.stub()
  const navigateToBanksStub = sinon.stub()
  const navigateToBuildStub = sinon.stub()
  const renderHeaderMenuStub = sinon.stub()

  const testbed = createTestbed(NavWrapper, {
    closeTray: closeTrayStub,
    navigateToBanks: navigateToBanksStub,
    navigateToBuild: navigateToBuildStub,
    renderHeaderMenu: renderHeaderMenuStub
  })

  afterEach(() => {
    navigateToBanksStub.resetHistory()
    navigateToBuildStub.resetHistory()
    renderHeaderMenuStub.resetHistory()
  })

  shouldRenderComponent(testbed, {}, NavWrapper)

  it('renders a single BreadcrumbLink by default', () => {
    testbed.render()
    const breadcrumb = testbed.findChildByType(Breadcrumb)
    expect(React.Children.count(breadcrumb.props.children)).to.equal(1)
  })

  it('renders additional BreadcumbLink children when passed', () => {
    testbed.render({ children: [<BreadcrumbLink key="0" />] })
    const breadcrumb = testbed.findChildByType(Breadcrumb)
    expect(React.Children.count(breadcrumb.props.children)).to.equal(2)
  })

  it('renders a close button when passed a closeTray prop', () => {
    testbed.render()
    const closeButtons = testbed.findChildrenByType(CloseButton)
    expect(closeButtons.length).to.equal(1)
  })

  it('does not render a close button when no closeTray prop', () => {
    testbed.render({ closeTray: null })
    const closeButtons = testbed.findChildrenByType(CloseButton)
    expect(closeButtons.length).to.equal(0)
  })

  describe('return button', () => {
    it('renders a return-to-build button when passed a navigateToBuild prop', () => {
      testbed.render()
      const buttons = testbed.findChildrenByType(Button)
      const lastButton = buttons[buttons.length - 1]
      expect(ReactDOM.findDOMNode(lastButton).innerText).to.equal('Return')
    })

    it('does not render a return button when no navigateToBuild prop', () => {
      testbed.render({ navigateToBuild: null })
      const buttons = testbed.findChildrenByType(Button)
      // At the time of this writing, there were 0 buttons on the page, so there's no actual loop
      // here. In the future, if any buttons do show up, we want to make sure 'Return' is not one of
      // them
      buttons.forEach((btn) => {
        expect(ReactDOM.findDOMNode(btn).innerText).to.not.equal('Return')
      })
    })

    it('calls navigateToBuild prop when clicked', () => {
      testbed.render()
      const buttons = testbed.findChildrenByType(Button)
      const lastButton = buttons[buttons.length - 1]
      ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(lastButton))
      expect(navigateToBuildStub).to.have.been.called()
    })
  })

  it('calls renderHeaderMenu during render', () => {
    testbed.render()
    expect(renderHeaderMenuStub).to.have.been.called()
  })

  it('calls navigateToBanks when the first breadcrumb is clicked', () => {
    testbed.render()
    const breadcrumbLink = testbed.findChildByType(BreadcrumbLink)
    testbed.click(breadcrumbLink)
    expect(navigateToBanksStub).to.have.been.called()
  })

  it('should meet a11y standards', (done) => {
    testbed.render()
    testbed.checkA11yStandards(done, {
      ignores: [
        'aria-allowed-role' // TODO: remove this when instui fixes Select
      ]
    })
  })
})
