import { beforeEach, describe, expect, it } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import './UsСarousel'
import './UsСarouselItem'
import type { LitElement } from 'lit'
import type { ICarouselProps } from './model/ICarouselProps'

type ITestUsCarousel = LitElement & ICarouselProps

describe('UsCarousel', () => {
  let el: ITestUsCarousel

  beforeEach(async () => {
    el = await fixture(html`
      <us-carousel>
        <us-carousel-item></us-carousel-item>
        <us-carousel-item></us-carousel-item>
      </us-carousel>`)
    await el.updateComplete
  })

  it('should render element with 2 carousel items correctly', async () => {
    const carouselSlide = el.querySelectorAll('us-carousel-item')
    expect(carouselSlide.length).toEqual(2)
  })

  it('should have default properties', async () => {
    expect(el.widgetView).to.equal('vertical')
    expect(el.itemOffset).to.equal(520)
    expect(el.activeSlide).to.equal(0)
    expect(el.autoSlide).to.equal(false)
    expect(el.delay).to.equal(3000)
    expect(el.carouselDelayIndex).to.toBeTruthy()
    expect(el.dataTestId).toBe('carousel')
  })

  it('should change itemOffset prop', async () => {
    const testItemOffset = 10

    el.itemOffset = testItemOffset

    await elementUpdated(el)

    expect(el.shadowRoot?.querySelector('.carousel-wrap')?.style.width).toEqual(`${testItemOffset}px`)
  })

  it('should determine the correct active dot', async () => {
    const testActiveSlide = 10

    el.activeSlide = testActiveSlide

    expect(el.isActiveDot(testActiveSlide)).toBeTruthy()
  })

  it('should move to left loop', async () => {
    const testActiveSlide = 10

    el.activeSlide = testActiveSlide
    el.moveLeftLoop()

    expect(el.activeSlide).to.equal(testActiveSlide - 1)
  })
})