import type { ContextmenuFactory, ContextmenuOption } from './types'
import { controlEvents } from '../control/resources'
import { inverseClass, query } from '../utils'
import { keyboardChoices, updateChoices } from './choices'

export default function playbackRate(option: ContextmenuOption): ContextmenuFactory {
  return (art) => {
    const {
      i18n,
      constructor: { PLAYBACK_RATE },
    } = art

    const html = PLAYBACK_RATE.map(
      item => `<span data-value="${item}">${item === 1 ? i18n.get('Normal') : item.toFixed(1)}</span>`,
    ).join('')
    const label = i18n.get('Play Speed')

    return {
      ...option,
      html: `${label}: ${html}`,
      click: (contextmenu, event) => {
        const value = event.target instanceof HTMLElement ? event.target.dataset.value : undefined
        if (value) {
          art.playbackRate = Number(value)
          contextmenu.show = false
        }
      },
      mounted: ($panel) => {
        const { on } = controlEvents(art, $panel)
        const $default = query('[data-value="1"]', $panel)
        if ($default)
          inverseClass($default, 'art-current')
        keyboardChoices($panel, label)
        on('video:ratechange', () => {
          const $current = Array.from($panel.querySelectorAll('span')).find(
            item => Number(item.dataset.value) === art.playbackRate,
          )
          if ($current) {
            inverseClass($current, 'art-current')
            updateChoices($panel)
          }
        })
      },
    }
  }
}