import { Dispatch, SetStateAction, useEffect } from 'react';
import FullScreenIcon from './icons/FullScreenIcon';
import Button from './ui/Button';
import CloseFullscreenIcon from './icons/CloseFullscreenIcon';
import { isMobileSafari } from 'react-device-detect';

interface IFullScreenProps {
  onFullScreenChange: Dispatch<SetStateAction<boolean>>;
  onClick: () => void;
  isFullScreen: boolean;
}

function FullScreenButton({
  isFullScreen,
  onFullScreenChange,
  onClick: handleClick,
}: IFullScreenProps) {
  useEffect(() => {
    onFullScreenChange(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', () =>
      onFullScreenChange(!!document.fullscreenElement)
    );

    return () =>
      document.removeEventListener('fullscreenchange', () =>
        onFullScreenChange(!!document.fullscreenElement)
      );
  }, [onFullScreenChange]);

  if (isMobileSafari) return null;

  return (
    <Button onlyIcon size='small' variant='secondary' onClick={handleClick}>
      <span className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5'>
        {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
      </span>
    </Button>
  );
}

export default FullScreenButton;