import {
  memo,
  RefObject,
  useEffect,
} from 'react'

import styled from 'styled-components/macro'

import { Icon } from 'features/Icon'
import { useAuthStore } from 'features/AuthStore'

const PipWrapper = styled.div`
  cursor: pointer;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 4px;
`

type PipProps = {
  isPlaying: boolean,
  videoRef: RefObject<HTMLVideoElement>,
}

export const PiP = memo(({ isPlaying, videoRef }: PipProps) => {
  const { user } = useAuthStore()
  const togglePip = async () => {
    try {
      if (
        document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement
      ) {
        await videoRef.current?.requestPictureInPicture()
      } else {
        await document.exitPictureInPicture()
      }
    } catch (err) {
      await document.exitPictureInPicture()
    }
  }

  useEffect(() => {
    window.addEventListener('visibilitychange', async () => {
      if (
        document.hidden === true
        && document.pictureInPictureEnabled
        && videoRef.current !== document.pictureInPictureElement
        && videoRef.current?.hidden === false
        && isPlaying
          && user
      ) {
        await videoRef.current?.requestPictureInPicture()
      }
    })
  }, [videoRef, isPlaying, user])

  return (
    <PipWrapper id='match_video_pic_in_pic'>
      <Icon refIcon='PiP' onClick={togglePip} />
    </PipWrapper>
  )
})