import React from "react";
import MapGL, {Marker} from "react-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css'
import './App.scss'
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import DialogTitle from '@material-ui/core/DialogTitle';

class Map2 extends React.Component {

    state = {
        viewport: {
            width: "100vw",
            height: "100vh",
            latitude: 0,
            longitude: 0,
            zoom: 15
        },
        locations: [],

        // new review stuff
        newReviewOpen: false,
        locationName: '',
        newReviewLocationId: 0,
        reviews: [],

        // new location stuff
        newLocationOpen: false,
        reviewLat: 0,
        reviewLng: 0,
        newName: '',
        newLocationId: 0,
        newReviewBody: ''
    }

    componentDidMount(){
        this.getInitialPosition();
        this.fetchLocations();
        this.getMarkers();
    }

    getInitialPosition = () => {
        navigator.geolocation.getCurrentPosition(position => {
            let newViewport = {
                height: "100vh",
                width: "100vw",
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                zoom: 15
            }
            this.setState({
                viewport: newViewport
            });
        });
    }

    handleLocationClick = id => {
        this.setState({newReviewLocationId: id});
        fetch(`http://localhost:3000/reviews/${id}`)
        .then(response => response.json())
        .then(reviews => this.setState({reviews}))
        this.setState({newReviewOpen: true});
    }

    fetchLocations = () => {
        fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
        .then(resp => resp.json())
        .then(locations => this.setState({locations}))
    }

    onViewportChange = viewport => {
        this.setState({viewport});
        this.fetchLocations();
        this.getMarkers();
    }

    mapClick = event => {
        this.setState({reviewLat: event.lngLat[1], reviewLng: event.lngLat[0]})
        this.setState({newLocationOpen: true});
    }

    handleClose = () => {
        this.setState({newLocationOpen: false});
    }

    handleReviewClose = () => {
        this.setState({newReviewOpen: false})
    }

    getReviews = () => {
        return this.state.reviews.map(review => {
            return (
                <li>{review.body}</li>
            );
        })
    }

    getMarkers = () => {
        return this.state.locations.map(location => {
            return (
                <Marker key={location.id} offsetLeft={-25} offsetTop={-70} latitude={parseFloat(location.lat)} longitude={parseFloat(location.lng)}>
                    <div className="marker-styles" onClick={() => {this.handleLocationClick(location.id)}} >
                        <p>{location.reviews}</p>
                    </div>
                </Marker>
            );
        });
    }

    newLocationFormHandler = event => {
        this.setState({[event.target.name]: event.target.value});
    }

    newLocationSubmitHandler = event => {
        event.preventDefault();
        fetch("http://localhost:3000/locations", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                'location_name': this.state.newName,
                'lat': this.state.reviewLat,
                'lng': this.state.reviewLng
            })
        })
        .then(res => res.json())
        .then((finalResponse) =>
        fetch("http://localhost:3000/reviews", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                'body': this.state.newReviewBody,
                'user_id': 1,
                'location_id': finalResponse.id
            })
        })
        )
        this.setState({newLocationOpen: false});
        this.fetchLocations();
        this.getMarkers();
    }

    render(){
        const TOKEN='pk.eyJ1Ijoiam9obmZhamFyZG8iLCJhIjoiY2swcjVnZmFpMDBwMTNnbWd6ZWRwMG1nMiJ9.VwxkYPyVdPzoLc83t4mlqQ'
        return (
            <div>
                <MapGL
                    {...this.state.viewport}

                    onClick={this.mapClick}
                    attributionControl={false}
                    onViewportChange={this.onViewportChange}
                    mapboxApiAccessToken={TOKEN}
                    mapStyle="mapbox://styles/mapbox/streets-v10">
                        {this.getMarkers()}
                    </MapGL>

                        <Dialog
                            open={this.state.newLocationOpen}
                            // keepMounted
                            onClose={this.handleClose}
                            aria-labelledby="alert-dialog-slide-title"
                            aria-describedby="alert-dialog-slide-description">
                            <DialogTitle id="alert-dialog-slide-title">{"Adding a new review!"}</DialogTitle>
                            <DialogContent>
                            <DialogContentText id="alert-dialog-slide-description">
                                <form onSubmit={this.newLocationSubmitHandler}>
                                <p><TextField
                                    id="standard-name"
                                    label="Location name"
                                    name="newName"
                                    // className={classes.textField}
                                    value={this.state.newName}
                                    onChange={this.newLocationFormHandler}
                                    margin="normal"
                                /></p>
                                <p><TextField
                                    id="standard-review"
                                    label="Your review"
                                    name="newReviewBody"
                                    // className={classes.textField}
                                    value={this.state.newReviewBody}
                                    onChange={this.newLocationFormHandler}
                                    margin="normal"
                                /></p>
                                <Button color="primary" type="submit">Ok!</Button>
                                </form>
                            </DialogContentText>
                            </DialogContent>
                        </Dialog>


                        <Dialog
                            open={this.state.newReviewOpen}
                            // keepMounted
                            onClose={this.handleReviewClose}
                            aria-labelledby="alert-dialog-slide-title"
                            aria-describedby="alert-dialog-slide-description">
                            <DialogTitle id="alert-dialog-slide-title">{`Adding a new review for location`}</DialogTitle>
                            <DialogContent>
                            <DialogContentText id="alert-dialog-slide-description">
                                {this.getReviews()}
                                <form onSubmit={this.newLocationSubmitHandler}>
                                <p><TextField
                                    id="standard-review"
                                    label="Your review"
                                    name="newReviewBody"
                                    // className={classes.textField}
                                    value={this.state.newReviewBody}
                                    onChange={this.newLocationFormHandler}
                                    margin="normal"
                                /></p>
                                <Button color="primary" type="submit">Ok!</Button>
                                </form>
                            </DialogContentText>
                            </DialogContent>
                        </Dialog>
            </div>
        )
    }
}

export default Map2;