import React from 'react';
import {MdAccountCircle} from 'react-icons/md';
import {
    NavLink as Link,
    Redirect,
    Route
} from 'react-router-dom';

import provideAuth, {logout} from "../../lib/Auth";
import {injectSheet, withTheme} from "../../lib/theme";
import i18n from "../../lib/i18n";
import {withNamespaces} from "react-i18next";

const styling = theme => ({
    wrapper: {
        position: 'relative'
    },
    nav: {
        position: 'absolute',
        zIndex: 100,
        background: theme.accent.blue,
        transform: 'translateX(-50%)',
        left: '50%',
        top: 'calc(100% - ' + theme.gutter.base * 2 + 'px)',
        margin: '0',
        padding: '0',
        '& li': {
            listStyleType: 'none'
        },
        '& a, & button': {
            display: 'block',
            // todo: add theme color
            margin: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 2 + 'px',
            color: '#000',
        }
    },
    toggle: {},
});

class AccountNav extends React.Component {
    state = {
        open: false,
        redir: false,
    };

    logout(evt) {
        evt.persist();
        logout();
        this.setState({redir: true});
    }

    static redirect = (props) => {
        if(props.redir) {
            return <Redirect to={'/' + i18n.languages[0]}/>;
        }

        return null;
    };

    render() {
        const {theme, classes, t} = this.props;

        const Redirect = (props) => {
            if(props.redir) {
                this.setState({redir: false});
            }

            return <AccountNav.redirect {...props}/>
        };
        return (
            <div className={classes.wrapper}>
                <Redirect redir={this.state.redir}/>

                {
                    this.props.auth.is ? (
                        <React.Fragment>
                            <button onClick={() => this.setState({open: !this.state.open})} className={this.props.className + ' ' + classes.toggle}><MdAccountCircle color={theme.textColor} size={'1.5em'}/></button>
                            {this.state.open ?
                                <ul className={classes.nav}>
                                    {/*<Route path="/:lng" render={props => <li><Link to={'/' + props.match.params.lng + '/account/setting'}>{t('header.account.setting')}</Link></li>}/>*/}
                                    <li>
                                        <button onClick={this.logout.bind(this)}>{t('header.account.logout')}</button>
                                    </li>
                                </ul> : null}
                        </React.Fragment>
                    ) : (
                        <React.Fragment>
                            <Route path="/:lng" render={props => <Link to={'/' + props.match.params.lng + '/auth'} className={this.props.className}><MdAccountCircle color={theme.textColor} size={'1.5em'}/></Link>}/>
                        </React.Fragment>
                    )}
            </div>
        )
    };
}

export default withNamespaces('common')(provideAuth(withTheme(injectSheet(styling)(AccountNav))));