import { fixture, assert, html, nextFrame } from '@open-wc/testing'
import UiProgress from '../../../src/md/progress/internals/UiProgress.js'
import '../../../src/md/progress/ui-progress.js'

describe('UiProgress', () => {
  async function basicFixture(): Promise<UiProgress> {
    return fixture(html`<ui-progress></ui-progress>`)
  }

  async function transitingFixture(): Promise<UiProgress> {
    return fixture(html`<ui-progress class="transiting"></ui-progress>`)
  }

  describe('basic', () => {
    let progress: UiProgress
    beforeEach(async () => {
      progress = await basicFixture()
    })

    it('sets the default values', () => {
      assert.equal(progress.min, 0)
      assert.equal(progress.max, 100)
      assert.equal(progress.value, 0)
    })

    it('set the value', async () => {
      progress.value = 50
      await nextFrame()
      assert.equal(progress.value, 50)
      // test clamp value
      progress.value = 60.1
      await nextFrame()
      assert.equal(progress.value, 60)
    })

    it('set the max', async () => {
      progress.max = 10
      progress.value = 11
      await nextFrame()
      assert.equal(progress.value, progress.max)
    })

    it('sets the ratio', async () => {
      progress.max = 10
      progress.value = 5
      await nextFrame()
      assert.equal(progress.ratio, 50)
    })

    it('sets the secondary ratio', async () => {
      progress.max = 10
      progress.secondaryProgress = 5
      await nextFrame()
      assert.equal(progress.secondaryRatio, 50)
    })

    it('set the min', async () => {
      progress.min = 10
      progress.max = 50
      progress.value = 30
      await nextFrame()
      assert.equal(progress.ratio, 50)
      progress.value = 0
      await nextFrame()
      assert.equal(progress.value, progress.min)
    })

    it('set the step', async () => {
      progress.min = 0
      progress.max = 10
      progress.value = 5.1
      await nextFrame()
      assert.equal(progress.value, 5)
      progress.step = 0.1
      progress.value = 5.1
      await nextFrame()
      assert.equal(progress.value, 5.1)
    })

    it('has a "aria-valuenow" attribute when `indeterminate` is true.', async () => {
      progress.min = 0
      progress.max = 10
      progress.value = 5.1
      await nextFrame()
      assert(progress.hasAttribute('aria-valuenow'))

      progress.indeterminate = true
      await nextFrame()
      assert(!progress.hasAttribute('aria-valuenow'))

      progress.indeterminate = false
      await nextFrame()
      assert(progress.hasAttribute('aria-valuenow'))
    })
  })

  describe('transiting class', () => {
    let progress: UiProgress
    beforeEach(async () => {
      progress = await transitingFixture()
    })

    it('progress bars', () => {
      const primary = progress.shadowRoot!.querySelector('.primary') as HTMLElement
      const secondary = progress.shadowRoot!.querySelector('.secondary') as HTMLElement
      const stylesForPrimaryProgress = window.getComputedStyle(primary)
      const stylesForSecondaryProgress = window.getComputedStyle(secondary)
      let transitionProp = stylesForPrimaryProgress['transitionProperty'] as string

      assert.equal(transitionProp, 'transform')
      assert.equal(stylesForPrimaryProgress['transitionDuration'], '0.23s')
      transitionProp = stylesForSecondaryProgress['transitionProperty']
      assert.equal(transitionProp, 'transform')
      assert.equal(stylesForSecondaryProgress['transitionDuration'], '0.23s')
    })
  })
})
