import { useState, useEffect } from 'react';
import usePipWindow from '../hooks/usePipWindow';
import usePipResize from '../hooks/usePipResize';
import PipRadarContent from './PipRadarContent';

/**
 * PipWindow component manages the documentPictureInPicture window lifecycle
 * and renders PipRadarContent inside the PiP window document.
 * 
 * @param {Object} props
 * @param {Array} props.playerArray - Array of player data
 * @param {Object} props.mapData - Map configuration data
 * @param {Object} props.bombData - Bomb state data
 * @param {Array} props.grenadeArray - Array of grenade data
 * @param {number} props.localTeam - Local player's team
 * @param {number} props.averageLatency - Average network latency
 * @param {Object} props.settings - User settings
 * @param {Function} props.onClose - Callback when PiP window closes
 */
const PipWindow = ({
  playerArray,
  mapData,
  bombData,
  grenadeArray,
  droppedWeaponArray,
  localTeam,
  averageLatency,
  settings,
  roundInfo,
  lockedPlayerIdx = null,
  followYourselfRotation = false,
  onClose,
}) => {
  const { size, setSize } = usePipResize();
  const { isSupported, openPip, closePip, updateContent } = usePipWindow({ onClose });
  const [pipOpened, setPipOpened] = useState(false);

  // Open PiP window on mount
  useEffect(() => {
    if (!isSupported) {
      onClose();
      return;
    }

    if (!pipOpened) {
      const content = (
        <PipRadarContent
          playerArray={playerArray}
          mapData={mapData}
          bombData={bombData}
          grenadeArray={grenadeArray}
          droppedWeaponArray={droppedWeaponArray}
          localTeam={localTeam}
          averageLatency={averageLatency}
          settings={settings}
          roundInfo={roundInfo}
          lockedPlayerIdx={lockedPlayerIdx}
          followYourselfRotation={followYourselfRotation}
          onClose={closePip}
        />
      );

      openPip(size, content);
      setPipOpened(true);
    }
  }, [isSupported, pipOpened, size, openPip, closePip, onClose, playerArray, mapData, bombData, grenadeArray, localTeam, averageLatency, settings]);

  // Update content when props change
  useEffect(() => {
    if (!pipOpened) return;

    const content = (
      <PipRadarContent
        playerArray={playerArray}
        mapData={mapData}
        bombData={bombData}
        grenadeArray={grenadeArray}
        droppedWeaponArray={droppedWeaponArray}
        localTeam={localTeam}
        averageLatency={averageLatency}
        settings={settings}
        roundInfo={roundInfo}
        lockedPlayerIdx={lockedPlayerIdx}
        followYourselfRotation={followYourselfRotation}
        onClose={closePip}
      />
    );

    updateContent(content);
  }, [pipOpened, playerArray, mapData, bombData, grenadeArray, localTeam, averageLatency, settings, lockedPlayerIdx, followYourselfRotation, closePip, updateContent]);

  // This component doesn't render anything in the main window
  // All content is rendered in the PiP window document
  return null;
};

export default PipWindow;
