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

/**
 * TODO
 */
function ZoomOut (props) {
    
    const { t } = props;

    let mouseDownTime;
    let mouseDownTimeout;
    let repeatTimeout;

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

    const repeatZoom = () => {
        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={<MinusOutlined style={{ fontSize: '16px'}}/>} 
            shape="circle" 
            tooltip={t('controls.zoom_out')}
            tooltipPlacement={"left"}
            style={{ 
                color: theme.controlColor, 
                backgroundColor: theme.controlBackgroundColor, 
                border: 'none', 
                width: '32px', 
                height: '32px'
            }} />
    );
}

ZoomOut.defaultProps = {
    id: 'zoom-out'
};

export default ZoomOut;
