import { useState, useEffect } from 'react';
import axios from 'axios';

import Service from '../components/Service';
import Contact from '../components/shared/Contact';

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

export default function Services({forwardedRef}) {
  const [cntServices, setCntServices] = useState('');
  const [isLoaded, setIsLoaded] = useState('');
  const [scrollPosition, setScrollPosition] = useState(0);
  const [fixed, setFixed] = useState(false);

  
      
  const api_url = process.env.REACT_APP_API_URL;

  useEffect(() => {
    const handleScroll = () => {
      const position = window.pageYOffset;
       if (position !== undefined && position !== null) 
        setScrollPosition(position);
      if (position > 100)
        setFixed(true);
      else
        setFixed(false);
  };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    }
  },[]);


  useEffect(async () => {
    var vid = document.getElementById('animation');
    vid.playbackRate = 2;
    //console.log(scrollPosition);
    axios
      .get(
        `${api_url}/api/servicespage?populate[0]=service&populate[1]=service.section.icon`,
      )
      .then(res => {
       //console.log(res.data.data.attributes);
        setCntServices(res.data.data.attributes);
        setIsLoaded(true);
      })
      .catch(err => {
        console.log(err);
        setIsLoaded(false);
      });
  }, []);

  if (!isLoaded) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 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>
    );
  }

  return (
    <PageLayout>
    <div className="bg-white dark:bg-dg-primary-1700 w-full pt-24">
      {/* Navigation Section */}
      <nav className={'pb-4 flex flex-col justify-center items-center mb-4' + (fixed ? ' fixed w-full' : '')}>
        <div className="flex flex-col justify-center items-center lg:items-start">
          <h6 className={"tracking-widest text-xs uppercase text-dg-secondary font-semibold" + (fixed ? ' hidden' : '')}>
            Our Services
          </h6>
          <ul className="flex flex-col lg:flex-row items-center justify-center text-xs font-semibold mt-4 bg-white shadow-lg rounded-lg">
            {cntServices.service.map(service => (
              <li
                key={service.id}
                className={"lg:mt-0 px-4 py-2 capitalize rounded-lg text-center transition-all hover:transition-all hover:text-white hover:bg-dg-primary-900 first:bg-dg-primary-900 first:text-white" + (fixed ? '' : ' mt-1')}
              >
                <a href={'#' + service.heading.split(' ')[0]}>{service.heading}</a>
              </li>
            ))}
          </ul>
        </div>
      </nav>
      {cntServices.service.map(service => (
        <Service key={service.id} heading={service.heading} fetch={service} />
      ))}
      {/* Contact Section */}
      <section id="contact" className="h-fit bg-baby-blue dark:bg-dg-primary-1600 px-4" ref={forwardedRef}>
        <Contact defaultIndex={0} />
      </section>
    </div>
    </PageLayout>
  );
}
