import React, { Component, PropTypes } from 'react';
	import { propTypes, reduxForm, Field } from 'redux-form';
	import { connect } from 'react-redux';
	import { push as pushAction } from 'react-router-redux';
	import compose from 'recompose/compose';
	import { Container, Row, Col } from 'react-grid-system';

	import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
	import getMuiTheme from 'material-ui/styles/getMuiTheme';
	import { Card, CardActions } from 'material-ui/Card';
	import Avatar from 'material-ui/Avatar';
	import RaisedButton from 'material-ui/RaisedButton';
	import Snackbar from 'material-ui/Snackbar';
	import TextField from 'material-ui/TextField';
	import CircularProgress from 'material-ui/CircularProgress';
	import LockIcon from 'material-ui/svg-icons/action/lock-outline';
	import RegisterIcon from 'material-ui/svg-icons/social/people';

	import { cyan500, pinkA200 } from 'material-ui/styles/colors';

	import defaultTheme from 'admin-on-rest/lib/mui/defaultTheme';
	import { AUTH_LOGIN } from 'admin-on-rest/lib/auth';

	const styles = {
	    main: {
	        display: 'flex',
	        flexDirection: 'column',
	        minHeight: '100vh',
	        alignItems: 'center',
	        justifyContent: 'center',

	    },
	    card: {
	        minWidth: 300,
	        width: '300px',
	        padding: '10px'
	    },
	    avatar: {
	        margin: '1em',
	        textAlign: 'center ',
	    },
	    form: {
	        padding: '0 1em 1em 1em',
	    },
	    input: {
	        display: 'flex',
	    },
	};

	function getColorsFromTheme(theme) {
	    if (!theme) return { primary1Color: cyan500, accent1Color: pinkA200 };
	    const {
	        palette: {
	            primary1Color,
	            accent1Color,
	        },
	      } = theme;
	    return { primary1Color, accent1Color };
	}

	const renderInput = ({ meta: { touched, error } = {}, input: { ...inputProps }, ...props }) =>
	    <TextField
	        errorText={touched && error}
	        {...inputProps}
	        {...props}
	        fullWidth
	    />;

	var translate = function( key ) {
		return key;
	}

	class CustomLoginPage extends Component {
	    constructor(props) {
	        super(props);
	        this.state = { signInError: false };
	    }

	    login = ({ username, password }) => {
	        const { authClient, push, location } = this.props;
	        if (!authClient) return;
	        return authClient(AUTH_LOGIN, { username, password })
	            .then(() => push(location.state ? location.state.nextPathname : '/'))
	            .catch(e => this.setState({ signInError: e }));


	        console.log(username + " " + password);
	        return false;
	    }

	    handleRegister( data ) {
	    	console.log(data);
	    }

	    render() {
	        const { handleSubmit, submitting, theme } = this.props;
	    	const muiTheme = getMuiTheme(theme);
	        const { primary1Color, accent1Color } = getColorsFromTheme(muiTheme);
	        const { signInError } = this.state;

	        return (
	            <MuiThemeProvider muiTheme={muiTheme}>
	                <div style={{ ...styles.main, backgroundColor: primary1Color }}>


	                    <Row>

	                        <Col xs={4} md={4}>

	<Card style={styles.card}>
	    <div style={styles.avatar}>
	        <Avatar backgroundColor={accent1Color} icon={<LockIcon />} size={60} />
	        <br />
	        <strong>You can login here.</strong>
	    </div>
	    {signInError && <Snackbar open autoHideDuration={4000} message={signInError.message || signInError || translate('aor.auth.sign_in_error')} />}

	    <form onSubmit={handleSubmit(this.login)}>
	        <div>
	            <div>
	                <Field
	                    name="username"
	                    component={renderInput}
	                    floatingLabelText={"YOUR USERNAME"}
	                    disabled={submitting}
	                />
	            </div>
	            <div>
	                <Field
	                    name="password"
	                    component={renderInput}
	                    floatingLabelText={"PASSWORD"}
	                    type="password"
	                    disabled={submitting}
	                />
	            </div>
	        </div>
	        <CardActions>
	            <RaisedButton
	                type="submit"
	                primary
	                disabled={submitting}
	                icon={submitting && <CircularProgress size={25} thickness={2} />}
	                label={"GİRİŞ YAP"}
	                fullWidth
	            />
	        </CardActions>
	    </form>
	</Card>

	                        </Col>
		                    <Col xs={4} md={4}></Col>

	                        <Col xs={4} md={4}>

	<Card style={styles.card}>
	    <div style={styles.avatar}>
	        <Avatar backgroundColor={accent1Color} icon={<RegisterIcon />} size={60} />
	        <br />
	        <strong>Create account from here</strong>
	    </div>
	    {signInError && <Snackbar open autoHideDuration={4000} message={signInError.message || signInError || translate('aor.auth.sign_in_error')} />}

	    <form onSubmit={this.handleRegister(this.login)}>
	        <div>
	            <div>
	            	<Row>
		                <Col xs={6} md={6}>
	<Field
	    name="firstname"
	    component={renderInput}
	    floatingLabelText={"First name"}
	    disabled={submitting}
	/>

		                </Col>
		                <Col xs={6} md={6}>

	<Field
	    name="lastname"
	    component={renderInput}
	    floatingLabelText={"Last name"}
	    disabled={submitting}
	/>
		                </Col>
	                </Row>
	            </div>
	            <div>
	                <Field
	                    name="registerUsername"
	                    component={renderInput}
	                    floatingLabelText={"Cellphone"}
	                    disabled={submitting}
	                />
	            </div>
	            <div>
	                <Field
	                    name="registerPassword"
	                    component={renderInput}
	                    floatingLabelText={"Password"}
	                    type="password"
	                    disabled={submitting}
	                />
	            </div>
	            <div>
	                <Field
	                    name="registerPassword2"
	                    component={renderInput}
	                    floatingLabelText={"Password (again)"}
	                    type="password"
	                    disabled={submitting}
	                />
	            </div>
	        </div>
	        <CardActions>
	            <RaisedButton
	                type="submit"
	                primary
	                disabled={submitting}
	                icon={submitting && <CircularProgress size={25} thickness={2} />}
	                label={"REGISTER"}
	                fullWidth
	            />
	        </CardActions>
	    </form>
	</Card>
	                        </Col>

	                    </Row>



	                </div>
	            </MuiThemeProvider>
	        );
	    }
	}

	CustomLoginPage.defaultProps = {
	    theme: defaultTheme,
	};

	const enhance = compose(
	    translate,
	    reduxForm({
	        form: 'signIn',
	        validate: (values, props) => {
	            const errors = {};

	            if (!values.username) errors.username = "Please enter username.";
	            if (!values.password) errors.password = "Please enter password.";

	            return errors;
	        },
	    }),
	    connect(null, { push: pushAction }),
	);

	export default enhance(CustomLoginPage);