import React from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import LandingImage from './walk.png';
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from '@material-ui/icons/Search';
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import logo from "./logo.png";
import Link from "@material-ui/core/Link";
import FooterComponent from './FooterComponent';
import Avatar from '@material-ui/core/Avatar';
import connor from "./me.jpg";
import marker from "./marker.png";
class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            city:'den',
        };
    }
    async componentDidMount() {
        var loadScript = async function (src) {
            var tag = document.createElement('script');
            tag.async = false;
            tag.src = src;
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(tag);
        }

        await loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCxwEtslsfD-XQXsWTfBRiTIOgbhMInnY0&callback=initMap&libraries=geometry');
    }
    handleCityChange = event => {
        console.log(event);
        this.setState({city: event.target.value});
        window.initMap(event.target.value);
    };

    render() {
        return (
            <div>
                <div id="landing">
                    <Grid container spacing={2}>
                        <Grid item xs={12} sm = {6} md = {6} id="landingTextHolder">
                            <div id="landingText">
                                <h3>WALK SAFE.</h3>
                                <p>Identifying unsafe areas for people to avoid. Find hotspots of crime, or other
                                    sketchy areas within our web-app.</p>
                            </div>
                        </Grid>
                        <Grid item xs={12} sm = {6} md = {6}>
                            <div id="landingImage"><img src={LandingImage} alt="landingImage"/></div>
                        </Grid>
                    </Grid>
                </div>
                <div id="secondSection">
                    <Grid container spacing={3}>
                        <Grid item xs={3} id="landingTextHolder">
                        </Grid>
                        <Grid item xs={6} id="searchSection">
                            <div id="searchBarHolder">
                                <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'}>Puebla</MenuItem>
                                    </TextField>
                                </FormControl>
                            </div>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                    <div id="map"></div>
                </div>
                <div id = "thirdSection">
                    <Grid container spacing={3}>
                        <Grid item xs={3}>
                        </Grid>
                        <Grid item xs={6} id = "aboutHighlights">
                            <h2>Highlighted Danger Zones</h2>
                            <div id = "highlightContent">
                                <p>Our website takes a location, like an address, and turns that into latitude and longitude coordinates. This is compared to
                                polygons of neighborhoods and municipalities, and changes the color based on the number of reports in the area. This lets you know
                                what areas are unsafe.</p>
                                <img src={marker} alt = "marker"/>
                            </div>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                </div>
                <FooterComponent/>
            </div>
        );
    }
}

export default Main;