import classnames from 'classnames';
import useOpenStreetMapPicker from '../hooks/use-open-street-map-picker';

export interface OpenStreetMapViewProps {
  lat: number;
  lng: number;
  zoom: number;
  msg?: string;
  onMarkerChange?: (value: { lat: number; lng: number }) => void;
  onZoomChange?: (zoom: number) => void;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

const OpenStreetMapView = ({
  lat,
  lng,
  zoom,
  msg,
  onMarkerChange = () => {},
  onZoomChange = () => {},
  className,
  style,
  children,
}: OpenStreetMapViewProps) => {
  const { mapRef } = useOpenStreetMapPicker({
    lat,
    lng,
    zoom,
    msg,
    zoomControlPosition: 'bottomleft',
    onMarkerChange,
    onZoomChange,
  });

  return (
    <div className="acms-admin-osm-container">
      <div
        ref={mapRef}
        className={classnames('acms-admin-position-absolute acms-admin-z-1', className)}
        style={style}
      />
      {children && (
        <div className="acms-admin-position-absolute acms-admin-z-2 acms-admin-right-0 acms-admin-left-0">
          {children}
        </div>
      )}
    </div>
  );
};

export default OpenStreetMapView;
