/* global describe, it */
import React from 'react'
import { expect } from 'chai'
import { shallow } from 'enzyme'
import sinon from 'sinon'

import Desc from '../../../src/components/TopicCard/Desc.js'

function render(props) {
  return shallow(<Desc {...props} />)
}

function sharedAssertions(wrapper, desc, { descProp }) {
  it('renders the correct wrapping html', function() {
    expect(wrapper.find('.scroll').length).to.equal(1)
    expect(wrapper.find('.scroll').find('.desc').length).to.equal(1)
  })
  it('renders the description', function() {
    expect(wrapper
      .find('.scroll')
      .find('.desc')
      .find('.riek_desc')
      .prop(descProp)).to.equal(desc)
  })
}

describe('TopicCard/Desc', function() {
  const desc = 'sample description'
  describe('not authorized to edit', function() {
    const wrapper = render({ authorizedToEdit: false, desc })
    sharedAssertions(wrapper, desc, { descProp: 'children' })
  })

  describe('authorized to edit', function() {
    const onChange = sinon.spy()
    const wrapper = render({ authorizedToEdit: true, desc, onChange })
    sharedAssertions(wrapper, desc, { descProp: 'value' })

    it('renders mdSupport', function() {
      const mdSupport = wrapper.find('.desc').childAt(1)
      expect(mdSupport.prop('className')).to.equal('mdSupport')
      expect(mdSupport.prop('href')).to.include('commonmark.org/help')
      expect(mdSupport.prop('target')).to.equal('_blank')
    })

    it('renders clearfloat', function() {
      const clearfloat = wrapper.find('.desc').childAt(2)
      expect(clearfloat.prop('className')).to.equal('clearfloat')
    })

    const textArea = wrapper.find('.riek_desc')
    it('has the correct classEditing', function() {
      expect(textArea.prop('classEditing')).to.equal('riek-editing')
    })
    it('has 6 rows', function() {
      expect(textArea.prop('rows')).to.equal('6')
    })

    describe('defaultProps', function() {
      describe('desc is present', function() {
        const textArea = render({
          authorizedToEdit: true, desc: '**sample description 2**'
        }).find('.riek_desc')

        // TODO I'd prefer to be mocking Util.mdToHTML
        it('converts markdown to html', function() {
          expect(textArea.prop('defaultProps').dangerouslySetInnerHTML.__html)
            .to.equal('<p><strong>sample description 2</strong></p>\n')
        })
      })
      describe('desc is not present', function() {
        const textArea = render({ authorizedToEdit: true, desc: null })
          .find('.riek_desc')
        it('renders placeholder message', function() {
          expect(textArea.prop('defaultProps').dangerouslySetInnerHTML.__html)
            .to.equal('<p class="emptyDesc">Edit the description... (supports markdown)</p>')
        })
      })
    })

    describe('editProps', function() {
      const ENTER = 13
      const target = { value: 'new value' }
      it('does not call onChange on Shift+Enter', function() {
        textArea.prop('editProps').onKeyPress({
          shiftKey: true, which: ENTER
        })
        expect(onChange.notCalled).to.equal(true)
      })

      it('calls onChange on ENTER', function() {
        textArea.prop('editProps').onKeyPress({
          which: ENTER, preventDefault: () => {}, target
        })
        expect(onChange.calledWith({ desc: 'new value' })).to.equal(true)
      })
    })
  })
})