import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import Button from "@material-ui/core/es/Button/Button";
import withRouter from "react-router-dom/es/withRouter";
import IconPerson from '@material-ui/icons/Person';
import $ from 'jquery';

const styles = theme => ({
    paper: {
        display: 'flex',
        flexGrow: 1,
        backgroundColor: '#4fc3ff',
        position: 'absolute', top: 0, bottom: 0, left: 0, right: 0
    },

    textField: {
        flexBasis: 90,
        margin: 10,
    },
    form:{
        display: 'flex',
        flexWrap: 'wrap',
        padding: 15,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',

    },
});

class LoginView extends React.Component {
    state = {
        username: '',
        password: '',
        weightRange: '',
        showPassword: false,
    };

    handleChange = prop => event => {
        this.setState({ [prop]: event.target.value });
    };
    handleClick() {
        var data = {"email":"samsai2@hotmail.com", "":"amoajp"}
        $.ajax({
            type:"POST",
            url:"https://ruedadifusion.com/Drones/Login.php",
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: function(res) {
                console.log(res);
                console.log("Added");
            },
            error: function(xhr, status, err) {
                console.error(xhr, status, err.toString());
            }
        });

    };
    handleClickShowPassword = () => {
        this.setState(state => ({ showPassword: !state.showPassword }));
    };

    render() {
        const { classes } = this.props;

        return (
            <div className={classes.paper}>
                <form className={classes.form}>
                <TextField
                    id="outlined-adornment-name"
                    className={classNames( classes.textField)}
                    variant="outlined"
                    label="Username"
                    value={this.state.username}
                    onChange={this.handleChange('username')}
                    InputProps={{
                        endAdornment: <InputAdornment position="end">
                            <IconButton>
                                <IconPerson/>
                            </IconButton>
                        </InputAdornment>,
                    }}
                />
                <TextField
                    id="outlined-adornment-password"
                    className={classNames( classes.textField)}
                    variant="outlined"
                    type={this.state.showPassword ? 'text' : 'password'}
                    label="Password"
                    value={this.state.password}
                    onChange={this.handleChange('password')}
                    InputProps={{
                        endAdornment: (
                            <InputAdornment position="end">
                                <IconButton
                                    aria-label="Toggle password visibility"
                                    onClick={this.handleClickShowPassword}
                                >
                                    {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
                                </IconButton>
                            </InputAdornment>
                        ),
                    }}
                />

                <Button variant="contained" color="primary" onClick={this.handleClick.bind(this)}>
                    Ingresar
                </Button>
                </form>
            </div>
        );
    }
}

LoginView.propTypes = {
    classes: PropTypes.object.isRequired,
};


//export default withStyles(styles)(LoginView);
const Login = withStyles(styles)(LoginView);
export default withRouter(Login);