import React, { Component } from 'react';
import { Button, Checkbox, Header, Form, Grid } from 'semantic-ui-react';

const styles = {
    root: {
        marginTop: '5%'
    }
};
class Register extends Component {
constructor() {
    super();
    this.state = {
        firstname: '',
        lastname: '',
        email: '',
        password: '',
        confirmPassword: '',
        acceptedTerms: false
    };
}
    onChange = (e) => {
        let state = this.state;
        state[e.target.name] = e.target.value;

        this.setState(state);
    };

    onRegisterFormSubmit = (e) => {
        e.preventDefault();
        console.log(this.state);
    };

    render() {
        return(
            <Grid style={styles.root} centered>
                <Grid.Column width={4}>
                    <Header textAlign={'center'} as='h1'>Zalóż konto juz dzisiaj</Header>
                    <Form onSubmit={this.onRegisterFormSubmit}>
                        <Form.Field>
                            <label htmlFor="name">Imię</label>
                            <input type="text"
                                   onChange={this.onChange}
                                   placeholder="Podaj swoje imię"
                            />
                        </Form.Field>
                        <Form.Field>
                            <label htmlFor="surname">Nazwisko</label>
                            <input type="text"
                                   onChange={this.onChange}
                                   placeholder="Podaj swoje nazwisko"
                        />
                        </Form.Field>
                        <Form.Field>
                            <label htmlFor="email">Email</label>
                            <input name="email"
                                   type="email"
                                   onChange={this.onChange}
                                   placeholder="Wpisz tu Email"
                            />
                        </Form.Field>
                        <Form.Field>
                            <label htmlFor="password">Hasło</label>
                            <input name="password" type="password" placeholder="Wpisz tu hasło"/>
                        </Form.Field>
                        <Form.Field>
                            <label htmlFor="confirmPassword">Powtórz hasło</label>
                            <input name="confirmPassword" type="password" placeholder="Wpisz hasło ponownie" />
                        </Form.Field>
                        <Form.Field>
                            <Checkbox label="Akceptuję warunki użytkowania serwisu"
                                      onChange={() => this.state.acceptedTerms = !this.state.acceptedTerms}
                            />
                        </Form.Field>
                        <Button basic type="submit">Zarejestruj się</Button>
                    </Form>
                </Grid.Column>
            </Grid>
        )
    }
}
export default Register;