import React, { useEffect, lazy, Suspense, useRef, useState } from 'react';
import './App.css';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Navigation from './components/shared/Navigation';
import Footer from './components/shared/Footer';
import Loader from './components/shared/Loader';
import ScrollToTop from './components/root/ScrollToTop';
import ReactGA from 'react-ga';
import routes from './routes';

const Home = lazy(() => import('./pages/Home'));
const Portfolio = lazy(() => import('./pages/Portfolio'));
const Services = lazy(() => import('./pages/Services'));
const Careers = lazy(() => import('./pages/Careers'));
const About = lazy(() => import('./pages/About'));
const BlogPost = lazy(() => import('./components/BlogPost'));
const ProcessPage = lazy(() => import('./pages/ProcessPage'));
const ContactPage = lazy(() => import('./pages/ContactPage'));
const CaseStudyBI = lazy(() => import('./pages/CaseStudyBI'));
const CaseStudyFinantial = lazy(() => import('./pages/CaseStudyFinantial'));
const CaseStudyTicketing = lazy(() => import('./pages/CaseStudyTicketing'));
const CaseStudyCentralized = lazy(() => import('./pages/CaseStudyCentralized'));
const CaseStudyResource = lazy(() => import('./pages/CaseStudyResource'));
const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));

// Navigation Links
const links = routes.filter(item => item.nav === true);

ReactGA.initialize(process.env.TRACKING_ID);

function App() {
  //tabs for contact form
  const link = useNavigate();

  //scroll to Contact segment
  const forwardedRef = useRef(null);

  //initialize analytics page tracking
  //usePageTracking();

  //scroll to Contact fn
  function scrollToView(event) {
    event.preventDefault();
    if (forwardedRef) {
      //console.log(forwardedRef.current.offsetTop);
      window.scrollTo({ behavior: 'smooth', top: forwardedRef.current.offsetTop });
    } else {
      link('/contact');
    }
  }

  //nav active links
  function activeLinks(activePage, bool = true) {
    const text = 'text-gray-500 ';
    if (bool === true) {
      return activePage ? 'activeLink dg-primary-900 ' : text;
    } else {
      return text;
    }
  }

  return (
    <div>
      <ScrollToTop />
      <Navigation
        links={links}
        scrollToView={scrollToView}
        activeLinks={activeLinks}
        forwardedRef={forwardedRef}
      ></Navigation>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route exact path="/" element={<Home forwardedRef={forwardedRef} />} />
          <Route exact path="/workwithus" element={<WorkWithUs />} />
          <Route exact path="/portfolio" element={<Portfolio />} />
          <Route exact path="/process" element={<ProcessPage />} />
          <Route exact path="/careers" element={<Careers />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/contact" element={<ContactPage />} />
          <Route exact path="/casestudybi" element={<CaseStudyBI />} />
          <Route exact path="/casestudystrata" element={<CaseStudyStrata />} />
          <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />} />
          <Route exact path="/casestudycentralized" element={<CaseStudyCentralized />} />
          <Route exact path="/casestudyresource" element={<CaseStudyResource />} />
          <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />} />
          <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
        </Routes>
      </Suspense>

      <Footer
        links={links}
        activeLinks={activeLinks}
        scrollToView={scrollToView}
        forwardedRef={forwardedRef}
      />
    </div>
  );
}

export default App;
