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

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as userManagementActions from "../state/UserManagementActions";

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken
    };
}

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 })
        }
    }

    async handleSubmit(e) {
        e.preventDefault();
        const { createNewUserAction } = this.props;
        this.props.goBack()
        await createNewUserAction(this.state, this.props.accessToken)
    }

    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', textAlign: 'left', padding: '2em', background: '#fff', borderRadius: '30px', margin: '3rem' }}>
                <Form style={{ width: '60rem' }}>
                    <h2>Benutzer anlegen</h2>
                    <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>
                    <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
                        Anlegen
                    </Button>
                </Form>
            </div >
        )
    }
}

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

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