// import React from 'react';
// import MapboxGeocoder , { GeocoderOptions} from '@mapbox/mapbox-gl-geocoder'
// import { ControlPosition, MarkerProps, useControl } from "react-map-gl";

// import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'


// export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & {
//     mapboxAccessToken: string;
//     marker?: Omit<MarkerProps, 'longitude' | 'latitude'>;
//     position: ControlPosition;

//     onLoading: (...args: any[]) => void;
//     onResults: (...args: any[]) => void;
//     onResult: (...args: any[]) => void;
//     onError: (...args: any[]) => void;
// }

// export const GeocoderControl = (props: GeocoderControlProps) => {

//     console.log(props);

//     const geocoder = useControl<MapboxGeocoder>(
//         () => {
//           const ctrl = new MapboxGeocoder({
//             ...props,
//             marker: false,
//             accessToken: props.mapboxAccessToken
//           });
//           ctrl.on('loading', props.onLoading);
//           ctrl.on('results', props.onResults);
//           ctrl.on('result', evt => {
//             props.onResult(evt);
    
//             // const {result} = evt;
//             // const location =
//             //   result &&
//             //   (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates));
//             // if (location && props.marker) {
//             //   setMarker(<Marker {...props.marker} longitude={location[0]} latitude={location[1]} />);
//             // } else {
//             //   setMarker(null);
//             // }
//           });
//           ctrl.on('error', props.onError);
//           return ctrl;
//         },
//         {
//           position: props.position
//         }
//       );


//     // @ts-ignore (TS2339) private member
//     if (geocoder._map) {
//         if (geocoder.getProximity() !== props.proximity && props.proximity !== undefined) {
//             geocoder.setProximity(props.proximity);
//         }
//         if (geocoder.getRenderFunction() !== props.render && props.render !== undefined) {
//             geocoder.setRenderFunction(props.render);
//         }
//         if (geocoder.getLanguage() !== props.language && props.language !== undefined) {
//             geocoder.setLanguage(props.language);
//         }
//         if (geocoder.getZoom() !== props.zoom && props.zoom !== undefined) {
//             geocoder.setZoom(props.zoom);
//         }
//         if (geocoder.getFlyTo() !== props.flyTo && props.flyTo !== undefined) {
//             geocoder.setFlyTo(props.flyTo);
//         }
//         if (geocoder.getPlaceholder() !== props.placeholder && props.placeholder !== undefined) {
//             geocoder.setPlaceholder(props.placeholder);
//         }
//         if (geocoder.getCountries() !== props.countries && props.countries !== undefined) {
//             geocoder.setCountries(props.countries);
//         }
//         if (geocoder.getTypes() !== props.types && props.types !== undefined) {
//             geocoder.setTypes(props.types);
//         }
//         if (geocoder.getMinLength() !== props.minLength && props.minLength !== undefined) {
//             geocoder.setMinLength(props.minLength);
//         }
//         if (geocoder.getLimit() !== props.limit && props.limit !== undefined) {
//             geocoder.setLimit(props.limit);
//         }
//         if (geocoder.getFilter() !== props.filter && props.filter !== undefined) {
//             geocoder.setFilter(props.filter);
//         }
//         if (geocoder.getOrigin() !== props.origin && props.origin !== undefined) {
//             geocoder.setOrigin(props.origin);
//         }
//     }
//     return (
//         <div>
//             Geocoder
//         </div>
//     )
// }

// const noop = () => {};

// GeocoderControl.defaultProps = {
//   marker: true,
//   onLoading: noop,
//   onResults: noop,
//   onError: noop
// };