// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import { inlineVideo } from './fixtures'
import ProgressBar from '../client/progressBar'
import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event'

const user = userEvent.setup()

const mockVideo = (video) => {
  let playInterval = null
  video.load = () => {
    /* do nothing */
  }
  video.play = () => {
    playInterval = setInterval(() => {
      video.currentTime += 100
    }, 100)
    //mock that the video has a duration of 10 seconds when we play it due it is fully loaded
    video.duration = 10
    video.paused = false
    video.dispatchEvent(new Event('playing'))
  }
  video.pause = () => {
    clearInterval(playInterval)
    video.pause = true
    //mock that when we pause the video at least has passed 100ms
    if (video.currentTime === 0) video.currentTime = 100
    video.dispatchEvent(new Event('pause'))
  }
  video.addTextTrack = () => {
    /* do nothing */
  }
  Object.defineProperty(video, 'paused', {
    writable: true,
    value: true,
  })
  Object.defineProperty(video, 'duration', {
    writable: true,
    value: 0,
  })
  Object.defineProperty(video, 'ended', {
    writable: true,
    value: false,
  })
  Object.defineProperty(video, 'currentTime', {
    writable: true,
    value: 0,
  })
  Object.defineProperty(video, 'seeking', {
    writable: true,
    value: false,
  })
  video.mock = true
}

describe('ProgressBar', () => {
  describe('progress bar on click and play video', () => {
    let progressBar: ProgressBar
    let video: HTMLVideoElement
    let videoContainer: HTMLDivElement
    beforeEach(() => {
      document.body.innerHTML = inlineVideo
      video = document.body.querySelector('video')
      videoContainer = document.body.querySelector('.cp-clip__video-container')

      mockVideo(video)
      progressBar = new ProgressBar(video, {})
      videoContainer.append(progressBar.getContainer())
    })

    afterEach(() => {
      const elem = document.body.children[0]
      document.body.removeChild(elem)
      progressBar.destroy()
    })

    it('initialises a component', () => {
      expect(progressBar).toBeTruthy()
    })

    it('update calls render', () => {
      const spy = jest.spyOn(progressBar, 'renderProgress')
      progressBar.update()
      expect(spy).toHaveBeenCalled()
    })

    it('updates when the video is playing and generating timeupdate events', () => {
      const spy = jest.spyOn(progressBar, 'update')
      video.dispatchEvent(new Event('timeupdate'))
      video.dispatchEvent(new Event('timeupdate'))
      expect(spy).toHaveBeenCalledTimes(2)
    })

    it('scrub when click on progressbar', async () => {
      const spy = jest.spyOn(progressBar, 'scrub')
      const container = progressBar.getContainer()
      //we skip check pointer events to simulate as it were able to do actions on the progress bar
      await user.click(container, undefined, {
        bubbles: true,
        pointerEventsCheck: PointerEventsCheckLevel.Never,
      })
      expect(spy).toBeCalled()
    })

    it('updateTime sets right text on progressbar time text', async () => {
      //duration is in seconds with floating point
      video.duration = 10
      progressBar.updateTimeText()
      let text = progressBar.timeText.textContent
      expect(text).toBe('00:00')

      video.currentTime = video.duration / 2
      progressBar.updateTimeText()
      text = progressBar.timeText.textContent
      expect(text).toBe('00:05')

      video.currentTime = video.duration
      progressBar.updateTimeText()
      text = progressBar.timeText.textContent
      expect(text).toBe('00:10')

      // we check that the time doesn't change before passing to the next second
      video.currentTime = 1.9
      progressBar.updateTimeText()
      text = progressBar.timeText.textContent
      expect(text).toBe('00:01')
    })

    it('getProgressFromTime return the right progress from the time', () => {
      video.duration = 10
      expect(progressBar.getProgressFromTime(0)).toBe(0)
      expect(progressBar.getProgressFromTime(5)).toBe(50)
      expect(progressBar.getProgressFromTime(10)).toBe(100)
    })

    it('getProgressFromPosition return the right progress from the position on the progress bar', () => {
      progressBar.mainBar.getBoundingClientRect = () => ({
        left: 100,
        right: 200,
      })
      expect(progressBar.getProgressFromPosition(100)).toBe(0)
      expect(progressBar.getProgressFromPosition(150)).toBe(50)
      expect(progressBar.getProgressFromPosition(200)).toBe(100)
    })

    it('stepForward move forward x seconds the current time', () => {
      video.duration = 10
      video.currentTime = 0
      progressBar.stepForward()
      expect(video.currentTime).toBe(
        0 + progressBar.opts.progressTimeStepSeconds
      )
    })

    it('stepBackward move backward x seconds the current time', () => {
      video.duration = 10
      video.currentTime = 10
      progressBar.stepBackward()
      expect(video.currentTime).toBe(
        10 - progressBar.opts.progressTimeStepSeconds
      )
    })
  })
})