import React, { useContext } from 'react';
import { Switch, Redirect, withRouter } from 'react-router-dom';
import PrivateRoute from '../helpers/privateRoute';
import AppContext from '../context/Context';
import { getPageName } from '../helpers/utils';
import PropTypes from 'prop-types';
import NavbarTop from '../components/navbar/JKNavbarTop';
import NavbarVertical from '../components/navbar/JKNavbarVertical';
import Footer from '../components/footer/JKFooter';

// Import your page components here
import JKSessionScreen from '../components/client/JKSessionScreen';
import ErrorBoundary from '../components/common/ErrorBoundary';

const JKSessionScreenWithErrorBoundary = () => (
  <ErrorBoundary>
    <JKSessionScreen />
  </ErrorBoundary>
);

const JKClientRoutes = ({ match: { url } }) => {
  const { isFluid, isVertical, navbarStyle } = useContext(AppContext);
  const isKanban = getPageName('kanban');

  return (
    <div className={isFluid || isKanban ? 'container-fluid' : 'container'}>
      {/* {isVertical && <NavbarVertical isKanban={isKanban} navbarStyle={navbarStyle} />} */}
      <div className="content">
        <NavbarTop logoWidth={240} />
        <Switch>
          <PrivateRoute exact path={`${url}/s/:id`} component={JKSessionScreenWithErrorBoundary} />
          {/* <PrivateRoute exact path={`${url}/s/:id`} component={DebugPage} /> */}
          {/*Redirect*/}
          <Redirect to="/errors/404" />
        </Switch>
        <Footer />
      </div>
    </div>
  )
}

JKClientRoutes.propTypes = { match: PropTypes.object.isRequired };

export default withRouter(JKClientRoutes);
