import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import EmployeesComponent from "./EmployeesComponent";
import axios from 'axios';
import "./AddEmployee.scss";

class AddEmployeeComponent extends Component {
    constructor() {
        super();
        this.state = {
          id: '',
          name: '',
          surname: '',
          username: '',
          password: '',
          daysOff: '',
          usedDays: '',
          admin: '',
        };
    }

    onChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    }

    onSubmit = (e) => {
        e.preventDefault();
        const {id, name, surname, username, password, daysOff, usedDays, admin } = this.state;

        console.log({id, name, surname, username, password, daysOff, usedDays, admin });

        axios.post('https://localhost:44306/api/employee', { id, name, surname, username, password, daysOff, usedDays, admin })
          .then((result) => {
        });
    }

    render () {
        const { id, name, surname, username, password, daysOff, usedDays, admin } = this.state;
        return (
            <div class="addingComponent">
                <form onSubmit={this.onSubmit}>
                <span>
                        Wprowadź id: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="id"
                        value={id}
                        onChange={this.onChange}
                    /><br/>
                    <span></span>
                    <span>
                        Wprowadź imię: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="name"
                        value={name}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Wprowadź nazwisko: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="surname"
                        value={surname}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Wprowadź nazwę użytkownika: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="username"
                        value={username}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Wprowadź hasło dla użytkownika: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="password"
                        value={password}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Wprowadź ilość dni wolnych dla użytkownika: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="daysOff"
                        value={daysOff}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Wprowadź liczbę dni, które pozostało użytkownikowi: <span>&nbsp;</span>
                    </span>
                    <input
                        type="text"
                        name="usedDays"
                        value={usedDays}
                        onChange={this.onChange}
                    /><br/>
                    <span>
                        Uprawnienia administratora 0/1
                    </span>
                    <input
                        type="text"
                        name="admin"
                        value={admin}
                        onChange={this.onChange}
                    /><br/><br/>
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}

export default AddEmployeeComponent;