//import FormSwitch from '../components/shared/FormSwitch';
import PageHeading from './../components/shared/PageHeading';
import SocialNetworks from '../components/shared/SocialNetworks';
import Contact from '../components/shared/Contact';
import BlogSection from '../components/BlogSection';
import WhyUsCard from '../components/WhyUsCard';
import HiringWidget from '../components/HiringWidget';

import Animation_Diligent from '../assets/animation_diligent.webm';

import '../styles/buttons.css';
import '../styles/cards.css';

//import bg_home from '../assets/logos/bg_home.png';
//import post_1 from '../assets/logos/post_1.png';

import { motion } from 'framer-motion';
import { useState, useEffect, useRef, useLayoutEffect, useContext } from 'react';
import axios from 'axios';
import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
import LandingSVG from '../components/shared/graphics/LandingSVG';
import ServicesHome from '../components/ServicesHome';
import Testimonials from '../components/Testimonials';
import LandingSVGv2 from '../components/shared/graphics/LandingSVG-v2';
import Landing from '../components/Landing';
import WhySection from '../components/WhySection';
import ProcessSection from '../components/ProcessSection';
import TechStack from '../components/TechStack';
import PortfolioSection from '../components/PortfolioSection';
import PageLayout from '../layout/PageLayout';
import MapDilig from '../components/Map';

const api_url = process.env.REACT_APP_API_URL;

export default function Home({scrollToView, forwardedRef}) {
  const [cnt, setCnt] = useState('');
  const [isLoaded, setIsLoaded] = useState('');

  const [contactRef, setRef] = useState(forwardedRef)
  const [contactElement, setContactElement] = useState(0);

  // const UIContext = useContext(UIContext);

  // const initUIValues = UIContext ?? {
  //   tab: '',
  //   contactRef: contactRef
  // };
  useEffect(() => {
    document.title = 'Diligent Software';
  },[]);


  useEffect(() => {
    var vid = document.getElementById('animation');
    vid.playbackRate = 2;
    axios
      .get(
        `${api_url}/api/homepage?populate[0]=landing&populate[1]=why&populate[2]=why.heading&populate[3]=why.card_left.icon&populate[4]=why.card_mid.icon&populate[5]=why.card_right.icon&populate[6]=why.card_left.icon&populate[7]=why.card_mid.icon&populate[8]=why.card_right.icon&populate[9]=landing.heading`,
        // api/homepage?&populate[0]=why&populate[1]=why.heading&populate[2]=why.card_left.icon&populate[3]=why.card_mid.icon&populate[4]=why.card_right.icon&populate[5]=why.card_left.icon&populate[6]=why.card_mid.icon&populate[7]=why.card_right.icon
      )
      .then(res => {
        setCnt(res.data.data.attributes);
        //console.log(res)
        setIsLoaded(true);
      })
      .catch(err => {
        console.log(err);
        setIsLoaded(false);
      });
  }, []);

  useEffect(() => {
    
   
    const url = window.location.pathname;
    const h = window.document.body.offsetHeight;

  }, [contactRef, cnt])

  if (!isLoaded) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
        <video id="animation" width="540" height="540" autoPlay muted loop>
          <source src={Animation_Diligent} type="video/webm" />
          Loading...
        </video>
      </div>
    );
  } else {
    return (
      <PageLayout>
      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
        {/* <FormSwitch /> */}

        {/* <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel><ClientForm /></Tab.Panel>
        <Tab.Panel><JobForm /></Tab.Panel>
      </Tab.Panels>
    </Tab.Group> */}

        {/* Landing Section */}
       <Landing data={cnt.landing.heading} />

        {/* Why Us Section */}
        <WhySection data={cnt.why} />

        {/* Our Services Section */}
        {/* <ServicesHome /> */}

        {/* Our Process Section */}
        <ProcessSection />

        {/* Our Process Section */}
        <TechStack />

        {/* Testimonials Section*/}
        <Testimonials
        />

        {/* Social Networks Section */}
        {/* <section
          id="socials"
          className="h-fit bg-white dark:bg-dg-primary-1700 flex flex-col items-center px-4"
        >
          <SocialNetworks />
        </section> */}

        <PortfolioSection />

        {/* Contact Section */}
        <section id="contact" className="" ref={forwardedRef}>
          <Contact defaultIndex={0} />
        </section>


        <MapDilig />
       
      </div>
      </PageLayout>
    );
  }
}
