import { View } from '@tarojs/components'
import { ReactNode } from 'react'
import { IDefinition, XgVideoProps } from '../../types/xg-video'
import './index.scss'

interface Props extends XgVideoProps {
  children?: ReactNode
  list: XgVideoProps['definitionList']
  value: IDefinition['quality']
  onItemSelected?: (to: IDefinition, from?: IDefinition) => void
}

export function PlaybackQualityList({ value, list = [], onItemSelected }: Props) {
  if (!Array.isArray(list)) {
    list = []
  }

  function onClickQuality(to: IDefinition, from: IDefinition) {
    if (onItemSelected) {
      onItemSelected(to, from)
    }
  }

  return (
    <View className='popup-layer-vertical-list playback-quality-list'>
      {list.map((item, idx) => {
        return (
          <View
            className={'item' + (item.quality === value ? ' selected' : '')}
            key={idx}
            onClick={() => {
              onClickQuality(
                item,
                list.filter((_item) => {
                  return _item.quality === value
                })[0]
              )
            }}
          >
            <View className='text-area'>{item.text}</View>
          </View>
        )
      })}
    </View>
  )
}