import { useMemo } from 'react';

const DESKTOP_TOP_CARD_WIDTH = 300;
const DESKTOP_TOP_CARD_GAP = 8;
const DESKTOP_TOP_CARD_HORIZONTAL_INSET = 24;
const DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH =
  DESKTOP_TOP_CARD_WIDTH + DESKTOP_TOP_CARD_HORIZONTAL_INSET;
const DESKTOP_TOP_CARDS_ROW_MIN_MAP_WIDTH =
  DESKTOP_TOP_CARD_WIDTH * 2 + DESKTOP_TOP_CARD_GAP + DESKTOP_TOP_CARD_HORIZONTAL_INSET;

interface UseMapCardLayoutOptions {
  mapWidth: number;
  hideTopCardsWhenNarrow: boolean;
  hideLegend: boolean;
  hideLocationSearch: boolean;
}

/**
 * Desktop top-card layout for the map overlay area: hides the cards entirely
 * when the map is too narrow for a single card, and stacks them vertically
 * when there is room for one card but not for two side by side.
 */
export function useMapCardLayout({
  mapWidth,
  hideTopCardsWhenNarrow,
  hideLegend,
  hideLocationSearch,
}: UseMapCardLayoutOptions) {
  return useMemo(() => {
    const hideTopCardsForWidth =
      hideTopCardsWhenNarrow && mapWidth > 0 && mapWidth < DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH;
    const stackTopCards =
      hideTopCardsWhenNarrow &&
      mapWidth >= DESKTOP_TOP_CARDS_STACKED_MIN_MAP_WIDTH &&
      mapWidth < DESKTOP_TOP_CARDS_ROW_MIN_MAP_WIDTH;

    return {
      showLocationSearch: !hideLocationSearch && !hideTopCardsForWidth,
      showLegend: !hideLegend && !hideTopCardsForWidth,
      topCardsLayoutClass: stackTopCards ? 'flex-col items-start' : 'items-start justify-between',
    };
  }, [mapWidth, hideTopCardsWhenNarrow, hideLegend, hideLocationSearch]);
}
