import React from "react";
import Link from "next/link";
import CONFIG from "../../../config.json";
import { useRouter } from "next/router";
function Services({ postData }) {
  const router = useRouter();
  if(postData){
    let needToParse = JSON.stringify(postData);
    var servicesData = JSON.parse(needToParse);
    console.log("===========DADA=========",JSON.stringify(servicesData));
  }
  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running

  const scrollPage = () => {
    window.scrollTo({ top: 900, behavior: 'smooth' })
  };
  return (
    <>
    <section className="site-hero overlay justify-content-center align-items-center"
    data-stellar-background-ratio="0.5">
       <div className="bg-section">
            <img alt={servicesData.data.mainService} src={CONFIG.FILE_URL+"/"+servicesData.data.image}/>
            <h1 className="bg-text heading-employee">{servicesData.data.mainService ? servicesData.data.mainService :''}</h1>
        </div>

    <div className="container">
        <div className="row site-hero-inner justify-content-center align-items-center">
            
            <div className="mouse-down" onClick={() => scrollPage()}>
                <div className="chevron"></div>
                <div className="chevron"></div>
                <div className="chevron"></div>
            </div>
        </div>
    </div>
    <a className="mouse smoothscroll" href="#next">
        <div className="mouse-icon">
            <span className="mouse-wheel"></span>
        </div>
    </a>
</section>
<main className="site-main">
<section className="home-section-alt">
<div className="container">
    <div className="heading-section aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
        <h2 className="home-section-title">{servicesData.data.mainService ? servicesData.data.mainService :''}</h2>
        <p className="text-left p-text">{servicesData.data.mainDesc ? servicesData.data.mainDesc :''}</p>
    </div> 
    <div className="home-section-content">
    {servicesData.data.services && servicesData.data.services.length > 0 &&
        <div className="row bod-block">
          {
            servicesData.data.services.map(service =>(
            <div className="col-md-4 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" key={service.id.toString()}>
                <div className="abt-org-col">
                    <div className="abt-org-col-text">
                        <div className="sbc-banner">
                                <Link href={servicesData.data.nickname+"/"+service.nickname}><a>
                                <img className="img-fluid img-rounded" alt={service.title} src={CONFIG.FILE_URL+"medium/"+service.image}/></a>
                                </Link>
                        </div>
                        <h3 className="h3Service">{service.title}
                        </h3>
                        <div className="p-text service"> {service.description.slice(0, 150) + (service.description.length > 150 ? "..." : "")}</div>
                        <div className="res-circle">
                            <div className="circle-icon">
                               <Link href={servicesData.data.nickname+"/"+service.nickname}><a><i className="fas fa-arrow-right"></i></a></Link>
                                 <Link href={servicesData.data.nickname+"/"+service.nickname} className="circle-txt">
                                 <a className="circle-txt"> <p>Read more</p></a>
                                </Link>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
             ))}

        </div>
        }  
    </div>
</div>
<div className="vl"></div>
</section>
<section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Have bespoke requirements?</p>
                                        <button className="btn btn-primary contact"><Link href="/contact-us">Connect us</Link></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
</>
  );
}
  
// export async function getStaticPaths() {
//   const res = await fetch(CONFIG.SERVER_URL+'getrecentparent');
//   const postData = await res.json();
// if(postData){
//       const needToParse = JSON.stringify(postData.data);
//       const arrData = JSON.parse(JSON.parse(needToParse));
//       let paths = [];
//      for(let i = 0; i < arrData.length; i++){
//       paths.push("/services/"+arrData[i].nickname);
//      }
//   return { paths, fallback: false };
//   }
// }


  export async function getServerSideProps({ query, params }) {
    try{
    const { mainservices } = query || params;
    const res = await fetch(CONFIG.SERVER_URL+'getServiceListByNickname/'+mainservices);
    const postData = await res.json();
    // if (!postData) {
    //   return {
    //     notFound: true,
    //   }
    // }
    return {
      props: {
        postData,
      }
    };
  }catch(e){  
    console.log("======DATA=======",e)
    return {
        props: null
      }
  }

  }

  export default Services;