import React from 'react';
import PropTypes from 'prop-types';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { IntlProvider, addLocaleData } from 'react-intl';
import arLocaleData from 'react-intl/locale-data/ar';
import { hot } from 'react-hot-loader';
import s from './App.scss';

import Routes from '../routes';
import store from '../redux/store';
import { IntlConfigProvider } from './Intl/Intl';

addLocaleData(arLocaleData);

export const history = syncHistoryWithStore(browserHistory, store);

class App extends React.Component {
  // Remove the server-side injected CSS.
  componentDidMount() {
    /* eslint-disable-next-line no-undef */
    const jssStyles = document.getElementById('jss-server-side');
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }

  render() {
    const { locale } = this.props;
    return (
      <IntlConfigProvider config={locale.config}>
        <IntlProvider messages={locale.messages} locale={locale.config.localeCode}>
          <Router history={history} routes={Routes} />
        </IntlProvider>
      </IntlConfigProvider>
    );
  }
}

App.propTypes = {
  locale: PropTypes.shape({
    config: PropTypes.object,
    messages: PropTypes.object
  }),
};

App.defaultProps = {
  locale: {},
};

export default hot(module)(App);