import React, { Component } from "react";
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';

import { connect } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
import { bindActionCreators } from "redux";
import * as userManagementActions from "../actions/UserManagementActions";

const mapStateToProps = state => {
    return state;
}

class CreateNewUserForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userID: '',
            firstName: '',
            lastName: '',
            password: '',
            isAdministrator: false
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        const { name, value } = e.target;
        if (name === 'isAdministrator') {
            if (e.target.checked) {
                this.setState({ [name]: true })
            } else {
                this.setState({ [name]: false })
            }
        } else {
            this.setState({ [name]: value })
        }
        console.log(JSON.stringify(this.state))
    }

    handleSubmit(e) {
        e.preventDefault();
        const { createNewUserAction } = this.props;
        createNewUserAction(this.state, this.props.accessToken)
        console.log("user sollte angelegt werden")
    }

    render() {
        return (
            <div id="UserManagementPageCreateUserButton" style={{ display: 'flex', justifyContent: 'center', textAlign: 'left' }}>
                <Form style={{ width: '60rem' }}>
                    <Form.Group className="mb-3">
                        <Form.Label>User-ID</Form.Label>
                        <Form.Control id="CreateUserComponentEditUserID" name='userID' type="text" placeholder="Bitte User-ID eingeben" onChange={this.handleChange} required />
                        <Form.Text className="text-muted">
                            Die User-ID kann im Nachhinein nicht mehr geändert werden.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Vorname</Form.Label>
                        <Form.Control id="CreateUserComponentEditFirstName" name="firstName" type="text" placeholder="Bitte Vornamen eingeben" onChange={this.handleChange} />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Nachname</Form.Label>
                        <Form.Control id="CreateUserComponentEditLastName" name="lastName" type="text" placeholder="Bitte Nachnamen eingeben" onChange={this.handleChange} />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Passwort</Form.Label>
                        <Form.Control id="CreateUserComponentEditPassword" name="password" type="password" placeholder="Bitte Passwort eingeben" onChange={this.handleChange} required />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Check id="CreateUserComponentEditIsAdministrator" name="isAdministrator" type="checkbox" label="Administrator-Rechte" onChange={this.handleChange} />
                    </Form.Group>
                    <LinkContainer id="CreateUserComponentCreateUserButton" to="/userManagement">
                        <Nav.Link id="CreateUserComponentCreateUserButton" >
                            {/* <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
                                Anlegen
                            </Button> */}
                            Anlegen
                        </Nav.Link>
                    </LinkContainer>
                </Form>
            </div >
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    createNewUserAction: userManagementActions.passNewUser,
    showAllUsers: userManagementActions.displayUsers
}, dispatch)

const ConnectedUserForm = connect(mapStateToProps, mapDispatchToProps)(CreateNewUserForm)
export default ConnectedUserForm