import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import Main from './Main/Main.js';
import FooterPage from './Footer/Footer.js';
import { I18nProvider } from '@lingui/react'

class App extends Component {


    state = {
        catalogs: {},
    }

  loadCatalog = async (language) => {
    const catalog = await import(
      './locales/'+language+'/messages.json')

    this.setState(state => ({
      catalogs: {
        ...state.catalogs,
        [language]: catalog
      }
    }))
  }

  componentDidMount() {
    this.loadCatalog(this.props.language)
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { language } = nextProps
    const { catalogs } = nextState

    if (language !== this.props.language && !catalogs[language]) {
      this.loadCatalog(language)
      return false
    }

    return true
  }

    render() {
       /// console.log('props',this.props);
        const {loggingIn, user, userType} = this.props;
        const { language } = this.props
        const { catalogs } = this.state
        //if (!catalogs[language]) return
        return (
            <I18nProvider language={language} catalogs={catalogs} >
                <div className="">

                    <Main />
                    <FooterPage />
                </div>
            </I18nProvider>

        );
    }
}

function mapStateToProps(state) {
   const { loggingIn, user, userType} = state.authentication;
   console.log(state);
   const { language } = state.locale
    return {
        loggingIn,
        user,
        userType,
        language,
    };
}
export default connect(
  mapStateToProps,
)(App)