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

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

import PushState from '../component/PushToApi/PushState';
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 {
    state = {
        magnificationLvl: 0
    };

    componentWillUnmount() {
        rmMagnificationConsumer('header');
    }

    componentDidMount() {
        const node = document.querySelector('html');

        this.setState({
            magnificationLvl: getMagnificationLvl(node.style.fontSize)
        });
        addMagnificationConsumer('header', (lvl) => {
            this.setState({
                magnificationLvl: lvl
            });
        });
    }

    switchFontSize = () => {
        this.setState({
            magnificationLvl: switchMagnification()
        });
    };

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

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

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

                        {this.props.auth.is ?
                            <PushState 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={this.switchFontSize} className={classes.item} style={{position: 'relative'}}>
                            <span style={{position: 'absolute', right: '-2px', top: theme.gutter.base, fontSize: '0.875rem', color: theme.textColor}}>
                                {this.state.magnificationLvl}</span>
                            <MdFormatSize color={theme.textColor} size={'1.5em'}/>
                        </button>
                        <button onClick={themeSwitcher.exec} className={classes.item}><MdInvertColors color={theme.textColor} size={'1.5em'}/></button>

                        <LocaleSwitch className={classes.item} match={props.match} history={props.history}/>
                    </div>)
            }}/>
        );
    }
}

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