import React, { useContext } from 'react';
import ControlGroupButton from './ControlGroupButton';
import { EnvironmentFilled } from '@ant-design/icons';
import ThemeContext from '../../theme/ThemeContext';
import MapContext from '../Map/MapContext';
import { centerAndZoom } from './Utils';

/**
 * TODO
 */
function CurrentLocation (props) {

    const { t } = props;

    const theme = useContext(ThemeContext);
    const { map } = useContext(MapContext);

    const gotoCurrentLocation = () => {
        try {
            navigator.geolocation.getCurrentPosition((position) => { // eslint-disable-line no-unused-expressions
                const opts = {
                    x: position.coords.longitude,
                    y: position.coords.latitude,
                    zoom: 13,
                    showPointIcon: true
                };
                centerAndZoom(map, opts);
            });

        } catch (e) {
            console.log('Navigator not availble - could not find current location');
        }
    };

    return (
        <ControlGroupButton
            onClick={gotoCurrentLocation}
            icon={<EnvironmentFilled style={{ fontSize: '16px'}}/>} 
            shape="circle" 
            tooltip={t('controls.current_location')}
            tooltipPlacement={"left"}
            style={{ 
                color: theme.controlColor, 
                backgroundColor: theme.controlBackgroundColor, 
                border: 'none', 
                width: '32px', 
                height: '32px'
            }} />
    );
};

CurrentLocation.defaultProps = {
    id: 'current-location'
};

export default CurrentLocation;
