import React, { Suspense } from 'react'
import Cookies from 'js-cookie';
import {
  Redirect,
  Route,
  Switch
} from 'react-router-dom'
import { CContainer, CFade } from '@coreui/react'

// routes config
import routes from '../routes'

const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
)

const TheContent = () => {

  function get_token_from_storage_or_cookie() {
    const shib = Cookies.get()
    console.log(shib);
    return shib;
  }

  return (
    <main className="c-main">
      <CContainer fluid>
        <Suspense fallback={loading}>
          <Switch>
            {routes.map((route, idx) => {
              return route.component && (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}

                  render={props =>
                    get_token_from_storage_or_cookie("tokenName") !== null
                   ? (
                      <route.component {...props} />
                    ) : (
                      <Redirect to={{ pathname: "/sso" }} />
                    )
                  }


                  // render={props => (
                  //   <CFade>
                  //     <route.component {...props} />
                  //   </CFade>
                  // )}
                  />
              )
            })}
            <Redirect from="/" to="/dashboard" />
          </Switch>
        </Suspense>
      </CContainer>
    </main>
  )
}

export default React.memo(TheContent)