/**
 * 전역 항적조회 뷰어 컴포넌트
 *
 * 우클릭 컨텍스트 메뉴 등에서 호출된 항적조회 결과를 표시
 * - 메인 맵에 전역으로 마운트되어 항상 사용 가능
 * - trackQueryStore에 데이터가 있을 때만 표시
 * - 닫기 버튼으로 항적 레이어 및 데이터 정리
 */

import React, { useCallback, useEffect } from 'react';
import { useTrackQueryStore } from '../stores/trackQueryStore';
import { TrackQueryViewer } from './TrackQueryViewer';
import { unregisterTrackQueryLayers } from '../utils/trackQueryLayerUtils';
import { shipBatchRenderer } from '../../map/ShipBatchRenderer';

export const GlobalTrackQueryViewer = () => {
  const tracks = useTrackQueryStore(state => state.tracks);
  const isModalMode = useTrackQueryStore(state => state.isModalMode);
  const showPlayback = useTrackQueryStore(state => state.showPlayback);
  const resetStore = useTrackQueryStore(state => state.reset);

  // 컴포넌트 언마운트 시 정리
  useEffect(() => {
    return () => {
      unregisterTrackQueryLayers();
    };
  }, []);

  // 닫기 핸들러
  const handleClose = useCallback(() => {
    unregisterTrackQueryLayers();
    resetStore();

    // deck.gl 레이어 업데이트
    shipBatchRenderer.immediateRender();
  }, [resetStore]);

  // 선박 모달 모드일 때는 전역 뷰어 숨김
  if (isModalMode) {
    return null;
  }

  // 데이터가 없으면 렌더링하지 않음
  if (tracks.length === 0) {
    return null;
  }

  return <TrackQueryViewer onClose={handleClose} showPlayback={showPlayback} />;
};

export default GlobalTrackQueryViewer;
