import * as React from 'react';

export default class App extends React.Component<{}, IProps> {
    constructor(props: {}) {
        super(props);

        this.state = {
            isLogged: false,
            user: '',
            token: '',
            login: '',
            password: ''
        };
    }

    async componentDidMount() {
        const token = await window.localStorage.getItem('token');
        if (token) {
            const user = await window.localStorage.getItem('user');
            this.setState({
                isLogged: true,
                token: token
            });
            console.log(user);
        }
    }

    doLogin(e: any) {
        e.preventDefault();
        const data = {login: this.state.login, password: this.state.password};
        fetch('http://localhost:8080/login', {
            method: 'POST',
            body: JSON.stringify(data)
        }).then((res) => res.json())
            .then((data) => {
                window.localStorage.setItem('user', data.user);
                window.localStorage.setItem('token', data.token);
            })
            .catch((err) => console.error(err))
    }

    render() {
        return (
            <div>
                {this.state.isLogged ? (
                    <span>{this.state.token}</span>
                ) : (
                    <form>
                        <input type="text"
                               value={this.state.login}
                               onChange={e => this.setState({login: e.target.value})}/>
                        <input type="password"
                               value={this.state.password}
                               onChange={e => this.setState({password: e.target.value})}/>
                        <button onClick={e => this.doLogin(e)}>Login</button>
                    </form>
                )}
            </div>
        );
    }
}

interface IProps {
    isLogged: boolean;
    user: string;
    token: string;
    login: string;
    password: string;
}