import React from 'react';

import { Geolocation } from '@awesome-cordova-plugins/geolocation';
import { useDispatch } from 'react-redux';

import { mapActions } from '../../store/map';

import '../../theme/get-location.css';
import { IonButton, IonIcon } from '@ionic/react';
import { locateOutline } from 'ionicons/icons';

const GetLocation: React.FC<{}> = () => {
  const dispatch = useDispatch();

  const onClickHandler = (event: any) => {
    console.log('Click handler');
    Geolocation.getCurrentPosition().then((position) => {
      console.log(
        `Click handler, position: ${position.coords.latitude}, ${position.coords.longitude}`
      );
      dispatch(
        mapActions.setCenter({
          lat: position.coords.latitude,
          lon: position.coords.longitude,
        })
      );
      dispatch(
        mapActions.setCurrent({
          lat: position.coords.latitude,
          lon: position.coords.longitude,
        })
      );
    });
  };

  return (
    <IonButton onClick={onClickHandler} className='get-location' shape='round' size='small' fill='solid'>
      <IonIcon slot='icon-only' icon={locateOutline} color='white' />
    </IonButton>
  );
};

export default GetLocation;