import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';

import Paths from '../constants/Paths';
import LoginContainer from '../containers/LoginContainer';
import CoreWrapperContainer from '../containers/CoreWrapperContainer';
import NotFound from './NotFound';

import 'react-datepicker/dist/react-datepicker.css';
import 'photoswipe/dist/photoswipe.css';
import '../lib/custom-ui/styles.css';

import '../styles.module.scss';

function Root({ store, history }) {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route exact path={Paths.LOGIN} component={LoginContainer} />
          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
          <Route path="*" component={NotFound} />
        </Switch>
      </ConnectedRouter>
    </Provider>
  );
}

Root.propTypes = {
  /* eslint-disable react/forbid-prop-types */
  store: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
  /* eslint-enable react/forbid-prop-types */
};

export default Root;
