import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { configureStore } from '@reduxjs/toolkit';
import RootReducer from './reducers';
import axios from 'axios';
import logger from 'redux-logger';

const defaultConfig = {
  apiUrl: 'http://localhost:8080/api'
};

const renderApp = ({ config, user }) => {
  const isDev = process.env.NODE_ENV !== 'production';
  const store = configureStore({
    devTools: isDev,
    preloadedState: {
      config: config,
      login: user
    },
    reducer: RootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
  });
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
};

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

const findConfig = (fullConfig) => {
  return Object.assign(fullConfig.defaultConfig, fullConfig.configs[fullConfig.hosts[window.location.host]]);
};

axios
  .get('/config.json')
  .then(
    (success) => {
      return Object.assign(defaultConfig, findConfig(success.data));
    },
    () => {
      return defaultConfig;
    }
  )
  .then((config) => {
    const details = JSON.parse(localStorage.getItem('userDetails') || '{}');
    return axios
      .get(`${config.apiUrl}/user/authorized`, {
        headers: {
          id: details.id,
          Authorization: details.token
        }
      })
      .then(
        (success) => {
          return {
            config,
            user: details || {}
          };
        },
        () => {
          return {
            config,
            user: {}
          };
        }
      );
  })
  .then(({ config, user }) => {
    renderApp({ config, user });
  });