import * as React from 'react';
import {Component} from './common/Component';
import {WithStyles} from './common/WithStyles';
import {authenticatedUserStore} from "./AuthenticatedUserStore";
import {EventObject} from "listocity-common/EventObject";
import {Link} from 'react-router';
var s = require<any>('./PageHeader.scss');
interface IPageHeaderProperties {

}

interface IPageHeaderState {
    user?: any;
}

@WithStyles(s)
export class PageHeader extends Component<IPageHeaderProperties, IPageHeaderState> {

    public state: IPageHeaderState = this.getStateFromStores();

    componentDidMount(): void {
        authenticatedUserStore.on('changeAuthenticatedUser', (event: EventObject, user: any) => {
            this.setState(this.getStateFromStores());
        });
    }

    render(): React.ReactElement<any> {
        return <section className={[s.PageHeaderContainer, 'clearfix'].join(' ')}>
            <section className={s.PageHeader}>
                <section className={s.leftMenuContainer}>
                    <ul className={s.menu}>
                        <li className={s.menuItem}>
                            <Link to="/gridde" className={s.menuItemLink}>
                                Browse
                            </Link>
                        </li>
                    </ul>
                </section>
                <section className={s.applicationNameContainer}>
                    Listocity
                </section>

                <section className={s.rightMenuContainer}>

                    {this.isUserLoggedIn()
                        ? `(${this.state.user.email})`
                        :
                        <ul className={s.menu}>
                            <li className={s.menuItem}>
                                <Link to="/auth" className={s.menuItemLink}>
                                    Log in
                                </Link>
                            </li>
                            <li className={s.menuItem}>
                                <Link to="/signup" className={s.menuItemLink}>
                                    Sign up
                                </Link>
                            </li>
                        </ul>
                    }
                </section>

            </section>
        </section>;
    }

    private getStateFromStores(): IPageHeaderState {
        return {
            user: authenticatedUserStore.getAuthenticatedUser()
        }
    }

    private isUserLoggedIn() {
        return this.state.user !== null;
    }
}