import React from 'react';
import {
    Route,
    Switch,
    Link
} from 'react-router-dom';
import {MdInvertColors} from 'react-icons/md';
import {withNamespaces} from 'react-i18next';

import {withTheme, injectSheet, themeSwitcher} from '../lib/theme';
import provideAuth from "../lib/Auth";

import LocaleSwitch from '../component/LocaleSwitch';
import AccountNav from '../component/User/AccountNav';

import {ReactComponent as Logo} from '../asset/logo.svg';
import {ReactComponent as LogoWhite} from '../asset/logo_white.svg';

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        alignContent: 'center',
        justifyContent: 'center',
        width: '100%',
        paddingRight: theme.gutter.base * 2 + 'px',
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    item: {
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        height: '48px',
        padding: '0 6px'
    },
    logoWrapper: {
        display: 'flex',
        flexDirection: 'row'
    },
    logo: {
        margin: 'auto 0 auto 0',
        height: '36px',
        width: '36px'
    },
    slogan: {
        margin: 'auto 0 auto ' + theme.gutter.base * 2 + 'px'
    },
    toStart: {
        marginRight: 'auto'
    },
    toEnd: {
        marginLeft: 'auto'
    }
});

const LogoStyled = withTheme(props => ('dark' === props.theme.name ? <LogoWhite className={props.className}/> : <Logo className={props.className}/>));

class Header extends React.Component {
    render() {
        const {classes, theme, moreButtons: MoreButtons, t} = this.props;

        return (
            <Route path="/:lng" render={(props) => {
                return (
                    <div className={classes.wrapper}>
                        <div className={classes.toStart}>
                            {this.props.auth.is ?
                                <Link to={'/' + props.match.params.lng + '/dashboard'} className={classes.item + ' ' + classes.logoWrapper}><LogoStyled className={classes.logo}/><span
                                    className={classes.slogan}>{t('header.slogan')}</span></Link> :
                                <div className={classes.item + ' ' + classes.logoWrapper}><LogoStyled className={classes.logo}/><span className={classes.slogan}>{t('header.slogan')}</span></div>
                            }
                        </div>

                        {MoreButtons ? <MoreButtons className={classes.item}/> : null}

                        <Switch>
                            {/* exclude link to auth when on auth, show dashboard link on auth page when logged in */}
                            {/* todo: find a better way */}

                            <Route path="/:lng/auth" render={() => (
                                null
                            )}/>

                            <Route path="/*" render={() => (
                                <AccountNav className={classes.item}/>
                            )}/>
                        </Switch>
                        <button onClick={themeSwitcher.exec} className={classes.item}><MdInvertColors color={theme.textColor} size={24}/></button>
                        <LocaleSwitch className={classes.item} match={props.match} history={props.history}/>
                    </div>)
            }}/>
        );
    }
}

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