import { Block, View } from '@tarojs/components'
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
}

export function PopupLayerSetting(props: Props) {
  const context = useContext(XGVideoContext)

  function onClickPipButton() {
    // setShowPopup(true)
    context.ctx?.exitPictureInPicture({})
  }

  return (
    <Block>
      <View className='popup-layer-setting'>
        <View className='setting-item setting-item-pip' onClick={onClickPipButton}>
          <View className='icon'></View>
          <View className='text'>小窗</View>
        </View>
      </View>
    </Block>
  )
}