import React, { useState, useContext } from 'react';
import ThemeContext from '../../../theme/ThemeContext';
import MapContext from '../../Map/MapContext';
import { Tooltip, Button } from 'antd';
import { FullscreenOutlined } from '@ant-design/icons';
import { transformExtent, get as getProjection } from 'ol/proj';

/**
 * TODO
 */
function LayerActionZoomToLayer (props) {
    const { olLayer, t } = props;

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

    const [layer, setLayer] = useState(olLayer);

    const onClick = () => {
        if (Array.isArray(layer.latlong_extent) && layer.latlong_extent.length == 4) { // use extent from metadata if available
            var extent = transformExtent(layer.latlong_extent, getProjection('EPSG:4326'), getProjection('EPSG:3857'));
            map.getView().fit(extent, map.getSize());
            return;
            
        }
    };

    return (
        <Button title={t('layerActions.zoomToLayer')} style={{padding: '0px 0px'}} type="text" size="small" onClick={onClick} icon={<FullscreenOutlined style={{color: '#1890ff'}}/>}></Button>
    )
}

export default LayerActionZoomToLayer;