import React from 'react';
import ContactMap from './ContactMap';
import VectorMap from './VectorMap';

interface UnifiedMapProps {
  latitude: number;
  longitude: number;
  zoom?: number;
  address?: string;
  clubName?: string;
  mapStyle?: string;
  height?: number;
  clubPrimaryColor?: string;
  clubSecondaryColor?: string;
  useVectorMaps?: boolean;
}

/**
 * Unified Map Component
 * 
 * Automatically chooses between raster (Leaflet) and vector (MapLibre GL) maps
 * based on the useVectorMaps prop or environment configuration.
 * 
 * Usage:
 * <UnifiedMap 
 *   latitude={50.0755}
 *   longitude={14.4378}
 *   useVectorMaps={true}  // or from settings
 * />
 */
const UnifiedMap: React.FC<UnifiedMapProps> = ({
  useVectorMaps = false,
  ...props
}) => {
  // Map style conversion: raster styles to vector equivalents
  const getVectorStyle = (rasterStyle?: string): 'positron' | 'dark-matter' | 'osm-bright' | 'klokantech-basic' => {
    const styleMap: Record<string, any> = {
      'default': 'osm-bright',
      'positron': 'positron',
      'positron-no-labels': 'positron',
      'dark': 'dark-matter',
      'dark-no-labels': 'dark-matter',
      'dark-matter': 'dark-matter',
      'toner': 'klokantech-basic',
      'toner-lite': 'klokantech-basic',
      'voyager': 'osm-bright',
      'osm-bright': 'osm-bright',
      'klokantech-basic': 'klokantech-basic',
    };
    
    return styleMap[rasterStyle || 'default'] || 'positron';
  };

  if (useVectorMaps) {
    // Use vector maps (MapLibre GL JS)
    return (
      <VectorMap
        {...props}
        mapStyle={getVectorStyle(props.mapStyle)}
      />
    );
  } else {
    // Use raster maps (Leaflet)
    return (
      <ContactMap
        {...props}
      />
    );
  }
};

export default UnifiedMap;
