import { View } from '@tarojs/components'
import { ACCEPT_PLAYBACK_RATES, XgInternalEvents } from 'xgplayer-mp-taro-core'
import { ReactNode, useContext } from 'react'
import { XgVideoProps } from '../../types/xg-video'
import { XGVideoContext } from '../../xg-video-context'
import './index.scss'

interface Props extends XgVideoProps {
  children?: ReactNode
  list: XgVideoProps['playbackRateList']
  onItemSelected?: (value: number, idx: number) => void
}

export function PlaybackRateList({ list = [], onItemSelected }: Props) {
  const context = useContext(XGVideoContext)

  if (Array.isArray(list)) {
    list = list.filter((_item) => ACCEPT_PLAYBACK_RATES.indexOf(_item) > -1)
  } else {
    list = [0.5, 0.8, 1.0, 1.25, 1.5]
  }

  function onClickRateButton(val: number, idx: number) {
    context.ctx?.playbackRate(val)
    context.eventCenter.trigger(XgInternalEvents.PlaybackRateChanged, val, idx)

    if (onItemSelected) {
      onItemSelected(val, idx)
    }
  }

  return (
    <View className='popup-layer-vertical-list playback-quality-list'>
      {list.map((val, idx) => {
        return (
          <View
            className={'item' + (val === context.playbackRate ? ' selected' : '')}
            key={idx}
            onClick={() => {
              onClickRateButton(val, idx)
            }}
          >
            <View className='text-area'>{Number.isInteger(val) ? val.toFixed(1) : val} X</View>
          </View>
        )
      })}
    </View>
  )
}