import { Block, Text, View } from '@tarojs/components'
import { XgInternalEvents } from 'xgplayer-mp-taro-core'
import {
  Control,
  ControlLeft,
  ControlMid,
  ControlRight,
  ExitFullscreenButton,
  formatTime,
  FullscreenButton,
  MiddleButton,
  PopupLayer,
  Progress,
  // SettingButton,
  Top,
  TopLeft,
  TopMid,
  TopRight
} from 'xgplayer-mp-taro-ui'
import { ReactNode, useContext, useState } from 'react'
import { IDefinition, XgVideoProps } from '../../types/xg-video'
import { XGVideoContext } from '../../xg-video-context'
import { PlaybackQualityList } from '../playbackQualityList'
import { PlaybackRateList } from '../playbackRateList'
import { TopTitle } from '../shortTopTitle'
import './index.scss'

interface ControlOverlayProps extends XgVideoProps {
  children?: ReactNode
}

enum PopupContentTypes {
  Rate,
  Quality
}

export function ControlOverlay(props: ControlOverlayProps) {
  const context = useContext(XGVideoContext)
  const { definitionList } = context
  const { playbackRateList, title } = props
  const [showPopup, setShowPopup] = useState(false)
  const [popupContentType, setPopupContentType] = useState<PopupContentTypes>()
  let popupLayerContent

  function onPlaybackRateBtnClick() {
    setPopupContentType(PopupContentTypes.Rate)
    setShowPopup(true)
  }
  function onRateItemSelected() {
    setPopupContentType(undefined)
    setShowPopup(false)
  }
  function onPlaybackQualityBtnClick() {
    setPopupContentType(PopupContentTypes.Quality)
    setShowPopup(true)
  }
  function onQualityItemSelected(to: IDefinition, from?: IDefinition) {
    setPopupContentType(undefined)
    setShowPopup(false)

    context.eventCenter.trigger(XgInternalEvents.PlaybackQualityChange, to, from, context)
  }
  function onProgressSeeked(percent) {
    const target = context.duration * percent
    context.ctx?.seek(target)
  }

  switch (popupContentType) {
    case PopupContentTypes.Rate:
      popupLayerContent = (
        <PlaybackRateList list={playbackRateList} onItemSelected={onRateItemSelected}></PlaybackRateList>
      )
      break
    case PopupContentTypes.Quality:
      popupLayerContent = (
        <PlaybackQualityList
          list={definitionList}
          value={context.definition || -1}
          onItemSelected={onQualityItemSelected}
        ></PlaybackQualityList>
      )
      break
  }

  function getCurDefinitionQualityName() {
    if (Array.isArray(definitionList)) {
      const curQuality = definitionList.filter((val) => val.quality === context.definition)[0]

      if (curQuality) {
        return curQuality.text
      }
    }
    return '-'
  }

  return (
    <Block>
      {showPopup ? (
        <PopupLayer>{popupLayerContent}</PopupLayer>
      ) : (
        <View className='control-overlay'>
          <Top
            style={{
              zIndex: 1
            }}
          >
            <TopLeft>
              {context.isFullScreen && <ExitFullscreenButton context={context.ctx}></ExitFullscreenButton>}
            </TopLeft>

            <TopMid>
              <TopTitle>{title}</TopTitle>
            </TopMid>

            <TopRight>
              {/* {context.isFullScreen && <SettingButton onClick={onClickSettingButton}></SettingButton>} */}
            </TopRight>
          </Top>

          <MiddleButton
            size='small'
            status={context.showLoading ? 'hide' : 'show'}
            paused={context.paused}
            ctx={context.ctx}
          ></MiddleButton>

          <Control>
            <ControlLeft>
              <View className='time-display'>
                {formatTime(context.currentTime)}
                <Text className='du'>/{formatTime(context.duration)}</Text>
              </View>
            </ControlLeft>
            <ControlMid>
              <Progress
                ctx={context.ctx}
                className='progress-bar'
                value={context.percent}
                buffer={context.buffer}
                size={4}
                style={{
                  position: 'relative',
                  bottom: 0
                }}
                onSeeked={onProgressSeeked}
              ></Progress>
            </ControlMid>
            <ControlRight>
              {!context.isFullScreen && <FullscreenButton context={context.ctx}></FullscreenButton>}
              {context.isFullScreen && Array.isArray(playbackRateList) && playbackRateList.length > 0 && (
                <View className='playback-rate-btn' onClick={onPlaybackRateBtnClick}>
                  倍速
                </View>
              )}
              {context.isFullScreen && Array.isArray(definitionList) && definitionList.length > 0 && (
                <View className='playback-quality-btn' onClick={onPlaybackQualityBtnClick}>
                  {getCurDefinitionQualityName()}
                </View>
              )}
            </ControlRight>
          </Control>
        </View>
      )}
    </Block>
  )
}