import ReactDOM from 'react-dom'
import ReactTestUtils from 'react-dom/test-utils'
import { fromJS } from 'immutable'
import ToggleDetails from '@instructure/ui-toggle-details/lib/components/ToggleDetails'

import MultipleChoiceRecord from 'quiz-interactions/lib/records/interactions/multiple_choice'

import Item from '../../../../common/records/Item'
import QuizSessionEvent from '../../../../common/records/QuizSessionEvent'

import ResponseEvent from '../ResponseEvent'

describe('ResponseEvent', () => {
  const item = new Item(fromJS({
    interactionData: {
      choices: [
        { id: '1', itemBody: '<p>hey</p>' },
        { id: '2', itemBody: '<div>ho</div>' },
        { id: '3', itemBody: '<h1>lets go</h1>' }
      ]
    }
  }))
  sinon.stub(item, 'getInteractionType').returns(new MultipleChoiceRecord())

  const eventWithResponseVal = (userResponseVal = '1') => {
    const event = new QuizSessionEvent(fromJS({
      id: '22',
      createdAt: '2016-09-28T18:45:27.700Z|232982772',
      eventType: 'RESPONSE',
      eventData: {
        userResponse: {
          value: userResponseVal
        }
      }
    }))

    sinon.stub(event, 'getItem').returns(item)
    return event
  }

  const testbed = createTestbed(ResponseEvent, {
    event: eventWithResponseVal(),
    item: item
  })

  const toggle = (index = 0) => {
    const toggle = ReactDOM.findDOMNode(testbed.findChildrenByType(ToggleDetails)[index])
    ReactTestUtils.Simulate.click(toggle.querySelector('button'))
  }

  shouldRenderComponent(testbed, {}, ResponseEvent)

  it('should render a ResponseEvent', () => {
    // testrail test_id:  C2954598, C2954599
    testbed.render()
    const responseEventComponent = testbed.findChildrenByType(ResponseEvent)[0]
    expect(responseEventComponent).to.not.be.undefined()
  })

  describe('ResponseEvent text', () => {
    // testrail test_id:  C2954598, C2954599
    it('should include selected choice', () => {
      const event = eventWithResponseVal('1')
      testbed.render({event})
      toggle()
      const text = testbed.getText()

      expect(text).to.include('hey')
      expect(text).to.not.include('lets go')
    })

    describe('with HTML in question stem', () => {
      const HTMLItem = new Item(fromJS({
        itemBody: "<p>hi</p><img src='images/test.png'/>",
        interactionData: {
          choices: [
            {id: '1', itemBody: '<p>hey</p>'},
            {id: '2', itemBody: '<div>ho</div>'},
            {id: '3', itemBody: '<h1>lets go</h1>'}
          ]
        }
      }))
      sinon.stub(HTMLItem, 'getInteractionType').returns(new MultipleChoiceRecord())

      it('should sanitize HTML in question stem', () => {
        const event = eventWithResponseVal(['1', '2', '3'])
        testbed.render({event, item: HTMLItem})
        const text = testbed.getText(testbed.rootNode)
        expect(text).to.include('hi')
        expect(text).to.not.include('<p>')
      })

      it('should include media toggle', () => {
        const event = eventWithResponseVal(['1', '2', '3'])
        testbed.render({event, item: HTMLItem})
        toggle()
        expect(testbed.getText()).to.include('Included Media')
      })

      it('should include embedded image', () => {
        const event = eventWithResponseVal('1')
        testbed.render({event, item: HTMLItem})
        toggle()
        toggle(1)
        expect(testbed.rootNode.innerHTML).to.include('img src="images/test.png"')
      })
    })
  })
})
