import { fixture, assert, html } from '@open-wc/testing'
import sinon from 'sinon'
import type UiCollapse from '../../../src/md/collapse/internals/Collapse.js'
import '../../../src/md/collapse/ui-collapse.js'

describe('UiCollapse: Flex layout', () => {
  async function basicFixture(): Promise<UiCollapse> {
    return fixture(
      html` <div id="container" style="height: 200px; display: flex;">
        <ui-collapse id="collapse" open style="flex: 1 0 auto">
          <div style="height:100px;">Lorem ipsum</div>
        </ui-collapse>
      </div>`
    )
  }

  let container: HTMLElement
  let collapse: UiCollapse
  let collapseHeight: string

  beforeEach(async () => {
    container = await basicFixture()
    collapse = container.querySelector('ui-collapse')!
    collapseHeight = getComputedStyle(collapse).height
  })

  it('default opened height', () => {
    assert.equal(collapse.style.height, '')
  })

  it.skip('set opened to false triggers animation', (done) => {
    collapse.open = false
    // Animation got enabled.
    collapse.addEventListener('transitionend', () => {
      // Animation disabled.
      assert.equal(collapse.style.transitionDuration, '0s')
      done()
    })
  })

  it('noAnimation disables animations', async () => {
    collapse.noAnimation = true
    // trying to animate the size update
    collapse.open = false
    await collapse.updateComplete
    // Animation immediately disabled.
    assert.equal(collapse.style.maxHeight, '0px')
  })

  it.skip('set opened to false, then to true', (done) => {
    // this listener will be triggered twice (every time `opened` changes)
    collapse.addEventListener('transitionend', () => {
      if (collapse.open) {
        // Check finalSize after animation is done.
        assert.equal(collapse.style.maxHeight, '')
        done()
      } else {
        // Check if size is still 0px.
        assert.equal(collapse.style.maxHeight, '0px')
        // Trigger 2nd toggle.
        collapse.toggle()
        // Size should be immediately set.
        assert.equal(collapse.style.maxHeight, collapseHeight)
      }
    })
    // Trigger 1st toggle.
    collapse.open = false
    // Size should be immediately set.
    assert.equal(collapse.style.maxHeight, '0px')
  })

  it('opened changes trigger resize', async () => {
    const spy = sinon.stub()
    collapse.addEventListener('resize', spy)
    // No animations for faster test.
    collapse.noAnimation = true
    collapse.open = false
    await collapse.updateComplete
    assert.isTrue(spy.calledOnce, 'resize was fired')
  })

  it.skip('overflow is hidden while animating', (done) => {
    collapse.addEventListener('transitionend', () => {
      // Should still be hidden.
      assert.equal(getComputedStyle(collapse).overflow, 'hidden')
      done()
    })
    assert.equal(getComputedStyle(collapse).overflow, 'visible')
    collapse.open = false
    // Immediately updated style.
    assert.equal(getComputedStyle(collapse).overflow, 'hidden')
  })

  it.skip('toggle horizontal updates size', () => {
    collapse.horizontal = false
    assert.equal(collapse.style.width, '')
    assert.equal(collapse.style.maxHeight, '')
    assert.equal(collapse.style.transitionProperty, 'max-height')

    collapse.horizontal = true
    assert.equal(collapse.style.maxWidth, '')
    assert.equal(collapse.style.height, '')
    assert.equal(collapse.style.transitionProperty, 'max-width')
  })
})
