import React from 'react';
import ModalBox from './ModalBox.js';
import './App.css';


const Empty = <ModalBox title="Movements" data=<h3>Empty</h3> />;
const Error = <ModalBox title="Movements" data=<h3>Error</h3> />;


class MovementsPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: props.loggedIn, movements: []};
    }

    componentDidMount() {
        fetch(this.props.targetUrl + '/movements', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({movements: data.movements, loggedIn: data.logged_in}))
            .catch(error => {console.log(error); this.setState({error: true})});
    }

    componentWillUnmount() {
        this.setState({error: false, movements: []});
    }

    handleTable() {
        if (this.state.movements !== undefined) {
            return <ul>{this.state.movements.map(movs => <li key={movs.time}>{movs.time}&nbsp; - &nbsp;{movs.type}</li>)}</ul>;
        } else {
            return Empty;
        }
    }

    render() {
        const movements = <ModalBox title="Movements" data={this.handleTable()} />;

        if (this.state.error) {
            return Error;
        }
        if (this.state.loggedIn) {
            return movements;
        } else {
            return (<ModalBox title="Movements" data=<h2>You have to login first!</h2> />);
        }
    }
}

export default MovementsPage;