import React from 'react';
import ReactDOM from 'react-dom';

import { Grid, Row, Col, PageHeader, Glyphicon, Button, ListGroup, ListGroupItem, Panel } from 'react-bootstrap';
import { Link } from 'react-router-dom';

import { Meteor } from 'meteor/meteor';
import './lobbyusercard.css'
import UserPDFListTracker from './UserPDFListContainer';

// This is a Card that display user's infos and usefull
// links in his lobby. The component is called by a
// wrapper that fill the `this.props` by Meteor Data.

export default class LobbyUserCard extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            myUser: this.props.myUser
            showPDFListTracker: false,
        }
    }

    render() {
        return(
            <Grid>
                <Row className="show-grid">
                <Col xs={12} md={4}>
                    <Panel className="profile-panel">
                        <Panel.Heading><h1><Glyphicon glyph="user" /> Mon profil</h1></Panel.Heading>
                        <Panel.Body>Bienvenue, <strong> {this.props.myUser.profile.prenom} {this.props.myUser.profile.nom}</strong></Panel.Body>
                        <ListGroup>
                            <ListGroupItem href="#"><Glyphicon glyph="time"/> Mettre a jour mes moyens de paiement.</ListGroupItem>
                            <ListGroupItem href="#" onClick={() => this.setState({ showPDFListTracker: true })><Glyphicon glyph="pencil"/> Editer mon profil</ListGroupItem>
                            <ListGroupItem href="#"><Glyphicon glyph="off"/> Deconnexion</ListGroupItem>
                        </ListGroup>
                    </Panel>
                </Col>
                <Col xs={12} md={8}>
                <Link to="/onwork">
                    <Button bsStyle="custom-new-pdf"><Glyphicon glyph="plus"/>Nouveau Statut </Button>
                </Link>
                    { showPDFListTracker && <UserPDFListTracker/> }
                </Col>
                </Row>
            </Grid>
        );
    }
}