/**
 * 항적 하이라이트 공통 훅
 *
 * 선박 목록 호버 <-> 지도 항적 하이라이트 양방향 연동
 */
import { useCallback } from 'react';
import { useTrackQueryStore } from '../stores/trackQueryStore';

/**
 * 항적 하이라이트 관리 훅
 */
export const useTrackHighlight = () => {
  const highlightedVesselId = useTrackQueryStore(state => state.highlightedVesselId);
  const setHighlightedVesselId = useTrackQueryStore(state => state.setHighlightedVesselId);

  const handleListItemHover = useCallback(
    (vesselId) => {
      setHighlightedVesselId(vesselId);
    },
    [setHighlightedVesselId],
  );

  const handlePathHover = useCallback(
    (vesselId) => {
      setHighlightedVesselId(vesselId);
    },
    [setHighlightedVesselId],
  );

  const isHighlighted = useCallback(
    (vesselId) => {
      return highlightedVesselId === vesselId;
    },
    [highlightedVesselId],
  );

  const clearHighlight = useCallback(() => {
    setHighlightedVesselId(null);
  }, [setHighlightedVesselId]);

  return {
    highlightedVesselId,
    handleListItemHover,
    handlePathHover,
    isHighlighted,
    clearHighlight,
  };
};
