import React from 'react';
import { Container } from 'react-bootstrap';
import './App.css';
import './bootstrap.min.css';


class LogoffPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {logged_in: props.loggedIn, loading: false};
    }

    componentDidMount() {
        fetch(this.props.targetUrl + '/status', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({
                loggedIn: data.logged_in
            }));
    }

    handleToggle = (event) => {
        this.setState({loading: true})

        fetch(this.props.targetUrl + '/logout', {
            method: 'POST',
            credentials: 'include'
        })
            .then(response => response.json())
            .then(data => this.setState({
                loggedIn: data.logged_in, loading: false
            }));
    }

    buttonValue() {
        if (this.state.loggedIn) {
            return "LOGOUT";
        } else {
            return "LOGIN";
        }
    }

    dynButton() {
        const logout = (
            <Container >
            <button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button>
            </Container>
        );

        const loading =
            <Container>
            <div className="spinner-border text-primary" role="status">
              <span className="sr-only">Loading...</span>
            </div>
            </Container>;

        if (this.state.loading) {
            return loading;
        } else {
            return logout;
        }
    }

    render() {
        if (this.state.loggedIn) {
            return this.dynButton();
        } else {
            return (<div><h2>You have to login first!</h2></div>);
        }
    }
}

export default LogoffPage;