import React, { useState, useCallback } from 'react';
import { Toolbar } from '@material-ui/core';
import Map from './openLayerMaps/Map';
import { Layers, TileLayer } from './openLayerMaps/Layers';
import { osm } from './openLayerMaps/Source';
import { fromLonLat } from 'ol/proj';
import { Controls, FullScreenControl } from './openLayerMaps/Controls';
import MapControlsStandard from './openLayerMaps/ui/MapControlsStandard';
import BingMaps from 'ol/source/BingMaps';
import 'ol/ol.css';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    toolbar: {
        padding: 0,
        minHeight: theme.spacing(6)
    }
}));
// original default -94.9065, 38.9884
export const GeoMap = (props) => {
    const { locations, start, mapType, tooltip, bingKey, toolbar, width, height, defaultZoom } = props;
    const classes = useStyles();
    const [center, setCenter] = useState(start);
    const [zoom, setZoom] = useState(defaultZoom);
    const [showLayer1, setShowLayer1] = useState(true);
    const [showLayer2, setShowLayer2] = useState(true);
    const [lat, setLat] = useState();
    const [long, setLong] = useState();
    // RoadOnDemand, CanvasDark, Aerial
    const [displayType, setDisplayType] = useState(mapType);
    const resetPosition = () => {
        setCenter(start);
        setZoom(9);
    };
    const sendPosition = (position) => {
        setCenter(position);
        console.log('POSITION', position);
    };
    const controlZoom = (input) => {
        const direction = input === 'in' ? 1 : -1;
        setZoom(zoom + direction);
    };
    const handleSliderChange = (event, newValue) => {
        setZoom(newValue);
    };
    const handleInputChange = (event) => {
        setZoom(event.target.value === '' ? '' : Number(event.target.value));
    };
    const handleBlur = () => {
        if (zoom < 0) {
            setZoom(0);
        }
        else if (zoom > 100) {
            setZoom(100);
        }
    };
    const handleInputPositionLat = (event) => {
        setLat(event.target.value);
    };
    const handleInputPositionLong = (event) => {
        setLong(event.target.value);
    };
    const setNewPosition = () => {
        setCenter([lat, long]);
    };
    const handleViewType = useCallback((event, newType) => {
        setDisplayType(newType);
    }, []);
    const getLocationValue = (value) => {
        setCenter(value.location);
    };
    return (React.createElement("div", { style: { width: width, height: height, overflow: 'hidden' } }, toolbar && (React.createElement(Toolbar, { className: classes.toolbar }, React.createElement(MapControlsStandard, { showLayer1: showLayer1, showLayer2: showLayer2, setShowLayer1: setShowLayer1, setShowLayer2: setShowLayer2, zoomIn: () => controlZoom('in'), zoomOut: () => controlZoom('out'), value: zoom, setValue: setZoom, handleSliderChange: handleSliderChange, handleInputChange: handleInputChange, handleBlur: handleBlur, reset: resetPosition, changeLat: handleInputPositionLat, changeLong: handleInputPositionLong, setPosition: setNewPosition, handleChange: handleViewType, displayType: displayType, getLocation: sendPosition, locations: locations, tooltip: tooltip, getLocationValue: getLocationValue }))), React.createElement(Map, { center: fromLonLat(center), zoom: zoom }, React.createElement(Layers, null, React.createElement(TileLayer, { source: osm(), zIndex: 0 }), React.createElement(TileLayer, { source: new BingMaps({
            preload: Infinity,
            visible: true,
            imagerySet: displayType,
            key: bingKey
        }), zIndex: 0 })), React.createElement(Controls, null, React.createElement(FullScreenControl, null)))));
};
//# sourceMappingURL=GeoMap.js.map