import _ from 'lodash'

import Checkbox from '@instructure/ui-forms/lib/components/Checkbox'
import TextInput from '@instructure/ui-forms/lib/components/TextInput'

import { fromJS, Set } from 'immutable'

import BankSearch from '../presenter'
import TagSuggestSelect from '../../../../common/components/shared/TagSuggestSelect'

describe('BankSearch', () => {
  const screenreaderNotificationStub = sinon.stub()
  const testbed = createTestbed(BankSearch, {
    search: fromJS({ interactionTypes: Set() }),
    showFilters: false,
    searching: false,
    toggle: sinon.stub(),
    toggleFilters: sinon.stub(),
    update: sinon.stub(),
    screenreaderNotification: screenreaderNotificationStub
  })

  it('renders a TextInput component', () => {
    const output = testbed.renderShallowly()
    expect(output.find(TextInput)).to.have.length(1)
  })

  it('renders interaction types', () => {
    const output = testbed.renderShallowly({
      showFilters: true,
      interactionTypes: [
        {
          count: 10,
          interaction_type: { id: '10', name: 'True / False' }
        },
        {
          count: 5,
          interaction_type: { id: '11', name: 'Multiple Choice' }
        }
      ]
    })
    expect(output.find(Checkbox)).to.have.length(2)
  })

  it('renders suggested tags', () => {
    const output = testbed.renderShallowly({
      showFilters: true,
      tags: [
        { tag: { id: '1', value: 'africa' } },
        { tag: { id: '1', value: 'asia' } },
      ]
    })
    expect(output.find(TagSuggestSelect).props().defaultSuggestions).to.have.length(2)
  })

  it('hides interaction types until toggled', () => {
    const it = (id) => ({
      count: 10,
      interaction_type: { id, name: 'True / False' }
    })

    const props = {
      interactionTypes: _.range(10).map((i) => it(i.toString())),
      showFilters: true
    }

    const hidden = testbed.renderShallowly(props)
    expect(hidden.find(Checkbox)).to.have.length(5)

    const shown = testbed.renderShallowly({ ...props, allInteractions: true })
    expect(shown.find(Checkbox)).to.have.length(10)
  })

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