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

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

    const { t } = props;
    
    let mouseDownTime;
    let mouseDownTimeout;
    let repeatTimeout;

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

    const repeatZoom = () => {
        // since this is a repeated zoom we want tiny increments over longs times = slow
        zoomDelta(map, 0.2, 300);
        repeatTimeout = setTimeout(() => repeatZoom(), 300);
    };

    const handleMouseDown = () => {
        mouseDownTime = Date.now();
        mouseDownTimeout = setTimeout(() => {
            repeatZoom();
        }, 150);
    };

    const stopZoom = () => {
        if (Date.now() - mouseDownTime < 150) {
            zoomDelta(map, 0.5, 150);
            clearTimeout(mouseDownTimeout);
        };
        clearTimeout(repeatTimeout);
    };

    return (
        <ControlGroupButton
            onMouseOut={() => stopZoom()}
            onMouseUp={() => stopZoom()}
            onMouseDown={() => handleMouseDown()}
            icon={<PlusOutlined style={{ fontSize: '16px'}}/>} 
            shape="circle" 
            tooltip={t('controls.zoom_in')}
            tooltipPlacement={"left"}
            style={{ 
                color: theme.controlColor, 
                backgroundColor: theme.controlBackgroundColor, 
                border: 'none', 
                width: '32px', 
                height: '32px'
            }} />
    );
};

ZoomIn.defaultProps = {
    id: 'zoom-in'
};

export default ZoomIn;
