// @ts-nocheck

import videojs from 'video.js'
import 'videojs-contrib-quality-levels'
import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-levels'
import i18n from '@/i18n'

export const createQualitySelector = (player: any) => {
  const qualityLevels: QualityLevelList = player.qualityLevels()
  const MenuButton = videojs.getComponent('MenuButton')
  const MenuItem = videojs.getComponent('MenuItem')
  let formatedQualities: { name: string; index: number; id: string }[]

  let t = i18n.global.t

  const setQuality = (id: string) => {
    const found = formatedQualities.find((i) => i.id === id)
    for (const quality of qualityLevels.levels_) {
      if (quality.id !== id) {
        quality.enabled = false
      } else {
        quality.enabled = true
      }
    }

    qualityLevels.selectedIndex_ = found?.index
    qualityLevels.trigger({ type: 'change', selectedIndex: found?.index })
  }

  class CustomMenuButton extends MenuButton {
    options_: any
    player: any
    createItems() {
      const player = this.player()

      return this.options_.items.map((item: { name: string }) => {
        const qualitySelectorButton = new MenuItem(player, { label: item.name })

        qualitySelectorButton.handleClick = (data) => {
          const qualityClicked = data.currentTarget.innerText
          const id = formatedQualities.find((i) => i.name === qualityClicked)?.id

          if (id) {
            setQuality(id)
          }
        }

        return qualitySelectorButton
      })
    }

    buildCSSClass() {
      return `vjs-icon-cog ${super.buildCSSClass()}`
    }
  }
  videojs.registerComponent('CustomMenuButton', CustomMenuButton)
  const formattedLevels = []

  const updateLevels = (items: { name: string; index: number; id: string; }[]) => {
    player.controlBar.removeChild('CustomMenuButton')
    player.controlBar.addChild('CustomMenuButton', {
      title: t("player.quality"),
      items: formatedQualities
    })
  }

  qualityLevels.on('addqualitylevel', () => {
    formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => {
      return {
        name: quality.height?.toString() + 'p',
        index: quality.id[0],
        id: quality.id
      }
    })

    formattedLevels.push(formatedQualities)
    updateLevels()
  })

  qualityLevels.on('change', function () {
    // TODO: Change label off button
  })
}