import React from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import reportImage from './report.png';
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from '@material-ui/icons/Search';
import { makeStyles } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import FooterComponent from "./FooterComponent";
import CircularProgress from "@material-ui/core/CircularProgress";
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from '@material-ui/icons/Close';


const google = window.google = window.google ? window.google : {}

class Report extends React.Component {


    constructor(props) {
        super(props);
        this.state = {city: 'den', isLoading: false, submitted: false};
    }

    handleCityChange = event => {
        console.log(event);
        this.setState({city: event.target.value});
    };

    submitForm = async (e) => {
        e.preventDefault();
        this.setState({isLoading:true});
        let inputs = document.getElementsByTagName('Input');
        let textArea = document.getElementById('details');
        let street = document.getElementById('street').value;
        let inputVals = {};
        [...inputs].forEach(input => {
            if(input.name !== ''){
                inputVals[input.name] = input.value;
            }
        });
        inputVals['details'] = textArea.value;
        inputVals['city'] = this.state.city;
        const fetchGeoCode = fetch("https://maps.googleapis.com/maps/api/geocode/json?address="+street+",+Denver,+CO&key=AIzaSyCiCyfZ2IHHliET9SREbix_9H2kIeEckf0");
        fetchGeoCode.then(response => {
            return response.json();
        }).then(async geocode => {
            let coords = geocode.results[0].geometry.location;
            inputVals['lat'] = coords.lat.toString();
            inputVals['lng'] = coords.lng.toString();
            fetch('/report/submit',{
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                headers: {'Content-Type':'application/json'},
                body: JSON.stringify(inputVals),
            }).then((res) => {
                console.log("Finished submitting report.");
                this.setState({isLoading:false, submitted: true});
            }).catch((e)=>{
                console.log(e);
            });

        });
    };

    render() {
        return (
            <div>
                <div id="landing">
                    <Grid container spacing={3}>
                        <Grid item xs={6} id="landingTextHolder">
                            <div id="landingText">
                                <h3>Report Suspicion</h3>
                                <p>Report any suspicious activity below</p>
                            </div>
                        </Grid>
                        <Grid item xs={6}>
                            <div id="landingImage"><img src={reportImage} alt="landingImage"/></div>
                        </Grid>
                    </Grid>
                </div>
                <div id="holder">
                    <Grid container spacing={3}>
                        <Grid item xs={3} id="landingTextHolder">
                        </Grid>
                        <Grid item xs={6} id="searchSection">
                            <div id="searchBarHolder">
                                <FormControl fullWidth variant="outlined" id={"searchBar"}>
                                    <div className={'fieldContainer'}>
                                        <FormControl  className={'textField'}>
                                            <TextField
                                                select
                                                label="City"
                                                id="demo-simple-select-outlined"
                                                value={this.state.city}
                                                onChange={this.handleCityChange}
                                                variant="outlined"
                                            >
                                                <MenuItem value={'den'}>Denver</MenuItem>
                                                <MenuItem value={'mex'}>Mexico</MenuItem>
                                            </TextField>
                                        </FormControl>
                                    </div>
                                    <div >
                                        <TextField
                                            id="street"
                                            className={'textField'}
                                            label="Street"
                                            margin="normal"
                                            variant="outlined"
                                            name='street'
                                        />
                                    </div>
                                    <div >
                                        <TextField
                                            id="details"
                                            label="Details of Incident"
                                            placeholder="Details, be specific"
                                            multiline
                                            className={'textField'}
                                            margin="normal"
                                            variant="outlined"
                                            name={'details'}
                                        />
                                    </div>
                                    <div className={'fieldContainer'}>
                                        <TextField
                                            id="datetime-local"
                                            label="Time of Incident"
                                            type="datetime-local"
                                            variant="outlined"
                                            defaultValue="2017-05-24T10:30"
                                            className={'textField'}
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            name={'time'}
                                        />
                                    </div>
                                    <div className={'fieldContainer'}>
                                        <Button variant="contained" color="primary" onClick={this.submitForm} className={'button'}>
                                            Submit Report
                                        </Button>
                                    </div>
                                    <div className={this.state.isLoading ? "loading active" : "loading inactive"}>
                                        <CircularProgress />
                                    </div>
                                    <SnackbarContent
                                        className={this.state.submitted ? "isSubmitted active" : "isSubmitted"}
                                        aria-describedby="client-snackbar"
                                        message={
                                            <span id="client-snackbar" className={""}>
          <CheckCircleIcon id = "successIcon"/>
                                                Submission Success.
        </span>
                                        }
                                    />
                                </FormControl>
                            </div>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                </div>
                <FooterComponent/>
            </div>
        );
    }
}

export default Report;