import React, { useEffect, lazy, Suspense } from 'react';
import './App.css';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Navigation from './components/shared/Navigation';
// import Home from './pages/Home';
// import Portfolio from './pages/Portfolio';
// import Services from './pages/Services';
// import Careers from './pages/Careers';
// import About from './pages/About';
// import BlogPost from './components/BlogPost';
import Footer from './components/shared/Footer';
import { useRef, useState } from 'react';
import Loader from './components/shared/Loader';
// import ProcessPage from './pages/ProcessPage';
// import ContactPage from './pages/ContactPage';
// import CaseStudyBI from './pages/CaseStudyBI';
// import CaseStudyFinantial from './pages/CaseStudyFinantial';
// import CaseStudyTicketing from './pages/CaseStudyTicketing';
// import CaseStudyCentralized from './pages/CaseStudyCentralized';
// import CaseStudyResource from './pages/CaseStudyResource';
// import CaseStudyStrata from './pages/CaseStudyStrata';
// import PrivacyPolicy from './pages/PrivacyPolicy';
// import WorkWithUs from './pages/WorkWithUs';

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 = [
  {
    name: 'Work with Us',
    description: '',
    href: '/workwithus',
    icon: '',
  },
  {
    name: 'Case Studies',
    description: '',
    href: '/portfolio',
    icon: '',
  },
  {
    name: 'Process',
    description: '',
    href: '/process',
    icon: '',
  },
  {
    name: 'Careers',
    description: '',
    href: '/careers',
    icon: '',
  },
  {
    name: 'About us',
    description: '',
    href: '/about',
    icon: '',
  },
];

function App() {
  //tabs for contact form
  const [tab, setTab] = useState(true);
  const [tabTitle, setTabTitle] = useState('Tell Us About Your Idea!');
  const link = useNavigate();

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

  //scroll to Contact fn
  function scrollToView(event) {
    event.preventDefault();
    if (forwardedRef) {
      forwardedRef.current.scrollIntoView({ behavior: 'smooth' });
    } 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>
      <Navigation
        links={links}
        scrollToView={scrollToView}
        activeLinks={activeLinks}
        forwardedRef={forwardedRef}
      ></Navigation>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route
            exact
            path="/"
            element={
              <Home
                tab={tab}
                tabTitle={tabTitle}
                setTab={setTab}
                setTabTitle={setTabTitle}
                forwardedRef={forwardedRef}
              />
            }
          />
          <Route exact path="/portfolio" element={<Portfolio />} />
          <Route exact path="/casestudybi" element={<CaseStudyBI />} />
          <Route exact path="/casestudystrata" element={<CaseStudyStrata />} />
          <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />} />
          <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />} />
          <Route exact path="/casestudycentralized" element={<CaseStudyCentralized />} />
          <Route exact path="/casestudyresource" element={<CaseStudyResource />} />
          <Route exact path="/services" element={<Services />} />
          <Route exact path="/careers" element={<Careers />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/post" element={<BlogPost />} />
          <Route exact path="/process" element={<ProcessPage />} />
          <Route exact path="/contact" element={<ContactPage />} />
          <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
          <Route exact path="/workwithus" element={<WorkWithUs />} />
        </Routes>
      </Suspense>

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

export default App;
