/**
 * KRA - Screenfull Component
 * Fullscreen toggle button
 */
import React, { useState, useEffect, useCallback } from 'react';
import { Tooltip } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';

const Screenfull: React.FC = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const checkFullscreen = useCallback(() => {
    setIsFullscreen(!!document.fullscreenElement);
  }, []);

  useEffect(() => {
    document.addEventListener('fullscreenchange', checkFullscreen);
    return () => document.removeEventListener('fullscreenchange', checkFullscreen);
  }, [checkFullscreen]);

  const toggleFullscreen = async () => {
    try {
      if (!document.fullscreenElement) {
        await document.documentElement.requestFullscreen();
      } else {
        await document.exitFullscreen();
      }
    } catch (error) {
      console.error('Fullscreen error:', error);
    }
  };

  return (
    <Tooltip title={isFullscreen ? '退出全屏' : '全屏'}>
      {isFullscreen ? (
        <FullscreenExitOutlined
          style={{ fontSize: 16, cursor: 'pointer' }}
          onClick={toggleFullscreen}
        />
      ) : (
        <FullscreenOutlined
          style={{ fontSize: 16, cursor: 'pointer' }}
          onClick={toggleFullscreen}
        />
      )}
    </Tooltip>
  );
};

export default Screenfull;
