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.data);
    var servicesData = JSON.parse(JSON.parse(needToParse));

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

    <section className="home-section-alt">
   <div className="container">
      <div className="home-section-content">
         <div className="row bod-block">
            <div className="col-md-12">
           
               <div className="row">
                  <div className="col-md-3 mb-3">
                     {servicesData.sidebar && servicesData.sidebar.length > 0 &&
                     <ul className="nav nav-pills flex-column" id="myTab" role="tablist">
                       {
                        servicesData.sidebar.map(service =>(
                        <li className="nav-item" key={service.id.toString()}>
                           <Link href={"/services/"+service.parentnickname+"/"+service.nickname}>
                           { service.nickname ==  servicesData.nickname ? <a className="nav-link active">{service.title ? service.title :''}</a> : <a className="nav-link">{service.title ? service.title :''}</a> } 
                              </Link>  </li>
                        ))}
                       
                     </ul>
                  }
                  </div>
                  <div className="col-md-9">
                     <div className="tab-content" id="myTabContent">
                        <div className="tab-pane fade heading-section show active" id="destination" role="tabpanel"
                           aria-labelledby="destination-tab">
                           <h2 className="home-section-title">{servicesData.mainService ? servicesData.mainService :''}</h2>
                           <p className="text-left p-text mb-5">{servicesData.mainDesc ? servicesData.mainDesc :''}</p>
                           <div className="row mb-2">
                              {servicesData.services && servicesData.services.length > 0 &&
                              <div className="d-flex flex-wrap">
                                 {
                                 servicesData.services.map((service,i) =>(
                                 <section className="about-section-alt" key={service.id.toString()}>
                                    <div className="isDesktop">
                                    { i % 2 == 0 ? (
                                           <div className="row bod-block">
                                            <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                             data-aos="fade-up" data-aos-duration="500">
                                             <div className="image-section">
                                                <img  src={CONFIG.FILE_URL+"large/"+service.image}/>
                                             </div>
                                          </div>
                                          <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                            data-aos="fade-up" data-aos-duration="500">
                                            <div className="image-content services-image-content">
                                                <div className="head-sec">
                                                <h3>{service.title}</h3>
                                                <p className="accordion-p p-text"> {service.content} </p>
                                               </div>
                                            </div>
                                        </div>
                                          </div>
                                         ) : (
                                             ''
                                          )}
                                      
                                        { i % 2 != 0 ? (
                                             <div className="row bod-block">
                                             <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                             data-aos="fade-up" data-aos-duration="500">
                                             <div className="image-content services-image-content">
                                                <div className="head-sec">
                                                <h3>{service.title}</h3>
                                                <p className="accordion-p p-text"> {service.content} </p>
                                                </div>
                                             </div>
                                             </div>
                                             <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                             data-aos="fade-up" data-aos-duration="500">
                                             <div className="image-section">
                                                <img  src={CONFIG.FILE_URL+"large/"+service.image}/>
                                              
                                             </div>
                                          </div>
                                          </div>
                                          ) : (
                                             ''
                                          )}
                                    </div>
                                    <div className="row bod-block isMobile">
                                            <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                             data-aos="fade-up" data-aos-duration="500">
                                             <div className="image-section">
                                                <img  src={CONFIG.FILE_URL+"large/"+service.image}/>
                                             </div>
                                          </div>
                                          <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 "
                                            data-aos="fade-up" data-aos-duration="500">
                                            <div className="image-content services-image-content">
                                                <div className="head-sec">
                                                <h3>{service.title}</h3>
                                                <p className="accordion-p p-text"> {service.content} </p>
                                               </div>
                                            </div>
                                        </div>
                                          </div>
                                </section>
                                ))}
                                 
                                 
                               </div>
                               }
                           </div>
                        </div>
                     </div>
                  </div>
                 
               </div>
              
            </div>
         </div>
      </div>
   </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 getServerSideProps({ query, params }) {
    try{
    const {subservices} = query || params;
    const res = await fetch(CONFIG.SERVER_URL+'getServiceDetails/'+subservices);
    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;