const Panel = require('../src/panel')

describe('Panel', () => {
  class TestPanelItem {
    getElement () {
      if (!this.element) {
        this.element = document.createElement('div')
        this.element.tabIndex = -1
        this.element.className = 'test-root'
      }
      return this.element
    }
  }

  it("adds the item's element as a child of the panel", () => {
    const panel = new Panel({ item: new TestPanelItem() }, atom.views)
    const element = panel.getElement()
    expect(element.tagName.toLowerCase()).toBe('atom-panel')
    expect(element.firstChild).toBe(panel.getItem().getElement())
  })

  describe('destroying the panel', () => {
    it('removes the element when the panel is destroyed', () => {
      const panel = new Panel({ item: new TestPanelItem() }, atom.views)
      const element = panel.getElement()
      const jasmineContent = document.getElementById('jasmine-content')
      jasmineContent.appendChild(element)

      expect(element.parentNode).toBe(jasmineContent)
      panel.destroy()
      expect(element.parentNode).not.toBe(jasmineContent)
    })

    it('does not try to remove the element twice', () => {
      const item = new TestPanelItem()
      const panel = new Panel({ item }, atom.views)
      const element = panel.getElement()
      const jasmineContent = document.getElementById('jasmine-content')
      jasmineContent.appendChild(element)

      item.getElement().focus()
      expect(item.getElement()).toHaveFocus()

      // Avoid this error:
      //   NotFoundError: Failed to execute 'remove' on 'Element':
      //   The node to be removed is no longer a child of this node.
      //   Perhaps it was moved in a 'blur' event handler?
      item.getElement().addEventListener('blur', () => panel.destroy())
      panel.destroy()
    })
  })

  describe('changing panel visibility', () => {
    it('notifies observers added with onDidChangeVisible', () => {
      const panel = new Panel({ item: new TestPanelItem() }, atom.views)

      const spy = jasmine.createSpy()
      panel.onDidChangeVisible(spy)

      panel.hide()
      expect(panel.isVisible()).toBe(false)
      expect(spy).toHaveBeenCalledWith(false)
      spy.reset()

      panel.show()
      expect(panel.isVisible()).toBe(true)
      expect(spy).toHaveBeenCalledWith(true)

      panel.destroy()
      expect(panel.isVisible()).toBe(false)
      expect(spy).toHaveBeenCalledWith(false)
    })

    it('initially renders panel created with visible: false', () => {
      const panel = new Panel(
        { visible: false, item: new TestPanelItem() },
        atom.views
      )
      const element = panel.getElement()
      expect(element.style.display).toBe('none')
    })

    it('hides and shows the panel element when Panel::hide() and Panel::show() are called', () => {
      const panel = new Panel({ item: new TestPanelItem() }, atom.views)
      const element = panel.getElement()
      expect(element.style.display).not.toBe('none')

      panel.hide()
      expect(element.style.display).toBe('none')

      panel.show()
      expect(element.style.display).not.toBe('none')
    })
  })

  describe('when a class name is specified', () => {
    it('initially renders panel created with visible: false', () => {
      const panel = new Panel(
        { className: 'some classes', item: new TestPanelItem() },
        atom.views
      )
      const element = panel.getElement()

      expect(element).toHaveClass('some')
      expect(element).toHaveClass('classes')
    })
  })

  describe('creating an atom-panel via markup', () => {
    it('does not throw an error', () => {
      document.createElement('atom-panel')
    })
  })
})