import React from 'react';
import { IntlProvider } from 'react-intl';
import {
  MuiThemeProvider,
  createMuiTheme,
} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import { IntlConfigProvider } from '../Intl/Intl';
import localeConfig from '../../../../locales/ar-sy/ar-sy_config.json';
import localeLang from '../../../../locales/ar-sy/ar-sy_lang.json';
import themeObject from '../../../style/theme';

const locale = {
  config: localeConfig,
  messages: localeLang,
};

const initialData = {
  __LOCALE__: locale,
  // __INITIAL_STATE__: store.getState(),
};

const theme = createMuiTheme(themeObject);

/**
 Just to be used in fixtures
 */
const CosmosBase = ({ children }) => (
  <MuiThemeProvider theme={theme}>
    <CssBaseline />
    <IntlConfigProvider config={locale.config}>
      <IntlProvider messages={locale.messages} locale={locale.config.localeCode}>
        {children}
      </IntlProvider>
    </IntlConfigProvider>
  </MuiThemeProvider>
);


export default CosmosBase;