import { memo } from 'react';

import type { FeatureFilters, FeatureMeta, HexagonData, PostcodeFeature } from '../../types';
import HoverCard from './HoverCard';

interface HoverCardOverlayProps {
  x: number;
  y: number;
  id: string;
  usePostcodeView: boolean;
  data: HexagonData[];
  postcodeData: PostcodeFeature[];
  filters: FeatureFilters;
  features: FeatureMeta[];
}

/** Resolves the hovered hexagon/postcode row from the loaded map data and
 * renders the hover card for it. Memoized so the row lookup only reruns when
 * the hover target or the underlying data actually changes. */
export const HoverCardOverlay = memo(function HoverCardOverlay({
  x,
  y,
  id,
  usePostcodeView,
  data,
  postcodeData,
  filters,
  features,
}: HoverCardOverlayProps) {
  return (
    <HoverCard
      x={x}
      y={y}
      id={id}
      isPostcode={usePostcodeView}
      data={
        usePostcodeView
          ? postcodeData.find((f) => f.properties.postcode === id)?.properties || null
          : data.find((d) => d.h3 === id) || null
      }
      filters={filters}
      features={features}
    />
  );
});
