import React from 'react';
import {
    BrowserRouter,
    Route,
    Redirect
} from 'react-router-dom';

import {jss, JssProvider} from 'react-jss';
//import vendorPrefixer from 'jss-vendor-prefixer';

import i18n, {i18nProvider} from './lib/i18n';

import GlobalStyle from './style/GlobalStyle';

import {ThemeProvider, initialStyle, initialTheme, changeStyle, themeSwitcher} from './lib/theme';
import {withNamespaces} from "react-i18next";

import './style/font.scss';

import {addApi} from './lib/ApiRequest';

//jss.use(vendorPrefixer());

/**
 * Bootstrap a React Application with a lot of default functionality
 */
class BaseApp extends React.Component {

    state = {
        theme: initialTheme,
        style: initialStyle,
        loading: false
    };

    constructor(props) {
        super(props);
        themeSwitcher.provide(this.changeStyle);
    }

    componentDidMount() {
        let html = document.querySelector('html');
        html.lang = i18n.languages[0];

        /*i18n.allLanguages.forEach((lng) => {
            const link = document.createElement('link');
            link.rel = 'alternate';
            link.href = 'https://<host>/<path>' + lng;
        });*/

        //<link rel="alternate" href="http://example.com/en" hrefLang="en"/>

        /*i18n.on('initialized', (lng) => {
            console.log('i18n initialized initialized initialized initialized initialized ');
            console.log(lng);
        });*/

        for(let api_name in this.props.api) {
            if(this.props.api.hasOwnProperty(api_name)) {
                addApi(api_name, this.props.api[api_name]);
            }
        }

        i18n.on('languageChanged', (lng) => {
            i18nProvider.trigger('languageChanged', [lng]);
            html.lang = lng;
        });

        /*i18n.on('loaded', (loaded) => {
            console.log('i18n loaded loaded loaded loaded loaded loaded loaded loaded ');
            console.log(loaded);
        });*/
    }

    changeStyle = () => {
        let new_style = changeStyle(this.state.theme);

        if(new_style) {
            this.setState(new_style);
        } else {
            // todo: when current theme transition doesn't exist currently fails silently for user - only log within changeStyle
        }
    };

    render() {
        // provide global style changer

        return (
            <JssProvider jss={jss}>
                <ThemeProvider theme={this.state.style}>
                    <BrowserRouter basename="/">
                        <React.Fragment>
                            <GlobalStyle/>

                            {/* todo: add here locale consumer and provider for all other components? */}
                            <Route path="/:lng" render={(props) => (
                                this.props.children
                            )}/>

                            <Route exact path="/" render={() => (
                                // redirect to the initial language on start, fetch it from path or localStorage
                                <Redirect to={'/' + i18n.languages[0]}/>
                            )}/>

                            <Route exact path="/:lng" render={(props) => (
                                false ? (
                                    <Redirect to={'/' + props.match.params.lng + '/dashboard'}/>
                                ) : (
                                    <Redirect to={'/' + props.match.params.lng + '/auth'}/>
                                )
                            )}/>
                        </React.Fragment>
                    </BrowserRouter>
                </ThemeProvider>
            </JssProvider>
        );
    }
}

export default withNamespaces('common')(BaseApp);
