import React, {Component} from 'react'
import ReactMapGL from 'react-map-gl';
import DeckGL, {GeoJsonLayer, WebMercatorViewport} from 'deck.gl';
import {MAPBOX_ACCESS_TOKEN} from './utils';
import TILESMapControls from "./TILESMapControls";
import {MapModes} from "./actionTypes";

class Map2 extends Component {

    constructor(props) {
        super(props);

        this.state = {
            mode: MapModes.CLEAR,
            startx: -1,
            starty: -1,
            endx: -1,
            endy: -1
        };

        // this.viewport = new WebMercatorViewport(props.viewport);
        this.mapcontrols = new TILESMapControls({
            mode: MapModes.CLEAR,
            handlePanStart: this._onPanStart,
            handlePanEnd: this._onPanEnd,
            handlePanMove: this._onPanMove,
            handlePanMoveSpatialFilter: this._onPanMoveSpatialFilter,
            handleClick: this._onClick,
            handleCloseSpatialFilter: this._onCloseSpatialFilter
        });
    }

    // -- Cross section related
    _onPanStart = (event) => {
        setState({
            startx: event.offsetCenter.x,
            starty: event.offsetCenter.y
        });
    };

    _onPanEnd = (event) => {

        // do something with the coordinates...
        console.log(`user has drawn a line from ${this.state.startx}, ${this.state.starty} to ${this.state.endx}, ${this.state.endy}`);

        setState({
            type: MapModes.CLEAR
        });
    };

    _onPanMove = (event) => {
        setState({
            endx: event.offsetCenter.x,
            endy: event.offsetCenter.y
        });
    };

    // -- Spatial filter related
    _onPanMoveSpatialFilter = (event) => {

    };

    _onClick = (event) => {

    };

    _onCloseSpatialFilter = (event) => {
    };

    // -- REACT RENDER
    render() {
        this.mapcontrols.setMode(this.state.mode);


        const layers = [];
        if (this.endx > -1 && this.state.type === MapModes.DRAWINGCROSSSECTION) {
            const wmv = new WebMercatorViewport(this.props.viewport);
            const [lng1, lat1] = wmv.unproject([this.state.startx, this.state.starty]);
            const [lng2, lat2] = wmv.unproject([this.state.endx, this.state.endy]);
            layers.push(new GeoJsonLayer({
                id: "drawlineid",
                data: {
                    type: "LineString",
                    coordinates: [[lng1, lat1], [lng2, lat2]]
                }
            }));
        }

        return (
            <div>
                <button onClick={()=> setState({type: MapModes.DRAWINGCROSSSECTION})}>Enter draw line mode</button>
                <ReactMapGL
                    {...this.props.viewport}
                    mapStyle="mapbox://styles/mapbox/outdoors-v9"
                    mapControls={this.mapcontrols}
                    mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
               >
                    <DeckGL {...this.props.viewport}
                            layers={layers}/>
                </ReactMapGL>
            </div>
        );
    }
}
export default Map2;