import { Box, BoxProps, Tooltip } from '@chakra-ui/react'
import React from 'react'
import { RiFullscreenLine } from 'react-icons/ri'

interface IFullscreenButtonProps {
  elementRef: React.MutableRefObject<any>
}

const FullscreenButton: React.FunctionComponent<IFullscreenButtonProps & BoxProps> = (props) => {
  const { elementRef, ...styles } = props

  const onFullScreen = () => {
    const element = elementRef.current
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    }
  }

  return (
    <Tooltip hasArrow label={'full screen'}>
      <Box
        onClick={() => onFullScreen()}
        _hover={{ transform: { base: 'scale(1.1)', md: 'scale(1.2)' } }}
        cursor={'pointer'}
        zIndex={'9'}
        position={'absolute'}
        bottom={'0'}
        right={'0'}
        p={'15px'}
        {...styles}
      >
        <RiFullscreenLine />
      </Box>
    </Tooltip>
  )
}

export default FullscreenButton