import React from "react";
import { useRouter } from "next/router";
import CONFIG from "../../config.json";
import SocialMedia from "./socialmedia";
import Link from "next/link";
import moment from 'moment';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
export default function Blog({ postData }) {
  const router = useRouter();
  let arrData =[];
  if(postData){
    const needToParse = JSON.stringify(postData.data);
     arrData = JSON.parse(JSON.parse(needToParse));
  }

    console.log("===",postData)

  if (router.isFallback) {
    return <div>Loading Page Data...</div>;
  }

  return (
    <>
   <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img className="card-img rounded-0" alt={arrData.title} src={CONFIG.FILE_URL+arrData.image}/>
            <h1 className="bg-text heading-employee">{arrData.title ? arrData.title :''}</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down">
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>


    <main className="site-main">
    <section className="blog_area single-post-area section-padding">
            <div className="container">
                <div className="row">
                    <div className="col-lg-8 posts-list">
                        <div className="single-post">
                            <h2>{arrData.title ? arrData.title :''}</h2>
                            <ul className="blog-info-link mt-3 mb-4">
                                <li><a href="#"><i className="fa fa-user"></i> Travel, Lifestyle</a></li>
                                <li><a href="#"><i className="fa fa-comments"></i> 03 Comments</a></li>
                            </ul>
                            <div className="blog_details">
                            {ReactHtmlParser(arrData.mainDesc) }
                            </div>
                         
                              

                        </div>
                        <div className="navigation-top">
                            <div className="d-sm-flex justify-content-between text-center">
                                <p className="like-info"><span className="align-middle"><i className="fa fa-heart"></i></span> Kapil
                                    and 4
                                    people like this</p>
                                <ul className="social-icons">
                                    <li><a href="https://www.facebook.com/formulaindia" target="_blank"
                                            className="social-links" rel="noreferrer"><i className="fab fa-facebook-f "></i></a></li>
                                    <li><a href="https://twitter.com/formulaindia/" target="_blank"
                                            className="social-links" rel="noreferrer"><i className="fab fa-twitter "></i></a></li>
                                    <li><a href="https://www.instagram.com/formulaindia/" target="_blank"
                                            className="social-links" rel="noreferrer"><i className="fab fa-instagram "></i></a></li>
                                    <li><a href="https://www.linkedin.com/company/formula-group/" target="_blank"
                                            className="social-links" rel="noreferrer"><i className="fab fa-linkedin-in "></i></a></li>
                                </ul>
                            </div>
                            <div className="navigation-area">
                                <div className="row">
                                    <div
                                        className="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center">
                                        <div className="thumb">
                                            <a href="#">
                                                <img className="img-fluid" src="img/instagram-feeds-1.jpg" alt=""/>
                                            </a>
                                        </div>
                                        <div className="arrow">
                                            <a href="#">
                                                <span className="lnr text-white ti-arrow-left"></span>
                                            </a>
                                        </div>
                                        <div className="detials">
                                            <p>Prev Post</p>
                                            <a href="#">
                                                <h4>Lorem ipsum dolor sit dolor</h4>
                                            </a>
                                        </div>
                                    </div>
                                    <div
                                        className="col-lg-6 col-md-6 col-12 nav-right flex-row d-flex justify-content-end align-items-center">
                                        <div className="detials">
                                            <p>Next Post</p>
                                            <a href="#">
                                                <h4>Lorem ipsum dolor sit dolor</h4>
                                            </a>
                                        </div>
                                        <div className="arrow">
                                            <a href="#">
                                                <span className="lnr text-white ti-arrow-right"></span>
                                            </a>
                                        </div>
                                        <div className="thumb">
                                            <a href="#">
                                                <img className="img-fluid" src="img/instagram-feeds-2.jpg" alt=""/>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                    <div className="col-lg-4">
                        <div className="blog_right_sidebar">
                            <aside className="single_sidebar_widget search_widget">
                                <form action="#">
                                    <div className="form-group">
                                        <div className="input-group mb-3">
                                            <input type="text" className="form-control" placeholder='Search Keyword'
                                                onFocus="this.placeholder = ''"
                                                onBlur="this.placeholder = 'Search Keyword'"/>
                                            <div className="input-group-append">
                                                <button className="btn" type="button"><i className="ti-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <button className="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Search</button>
                                </form>
                            </aside> 

                            <SocialMedia />

                            <aside className="single_sidebar_widget post_category_widget">
                                <h4 className="widget_title">Category</h4>
                                {arrData.categories && arrData.categories.length > 0 &&
                                <ul className="list cat-list">
                                     {
                                       arrData.categories.map(category =>(
                                      <li key={category.id.toString()}>
                                         <Link href={`/blog/${category.catnickname}`} as={`/blog/${category.catnickname}`}>
                                           <a className="d-flex">
                                           <p>{category.categoryname} </p>&nbsp;
                                           <p>({category.totalPost})</p>
                                            </a>
                                          </Link>
                                          
                                    </li>
                                     ))}      
                                </ul>
                                }   
                            </aside>
                            <aside className="single_sidebar_widget popular_post_widget">
                                <h3 className="widget_title">Recent Post</h3>
                                {arrData.recentproducts && arrData.recentproducts.length > 0 &&
                                <div>
                                   {
                                 arrData.recentproducts.map(post =>(
                                <div className="media post_item"  key={post.id.toString()}>
                                    <img  alt={post.title} src={CONFIG.FILE_URL+"thumb/"+post.image}/>
                                    <div className="media-body">
                                    <Link href={`/blog/${post.nickname}`} as={`/blog/${post.nickname}`}>
                                         <a className="d-inline-block">
                                           <h3>{post.title}</h3>
                                    </a>
                                    </Link>
                                        <p>{moment(post.doe).format('MMMM DD, YYYY')}</p>
                                    </div>
                                </div>
                                ))}   
                                </div>
                                }
                               
                            </aside>
                        


                            <aside className="single_sidebar_widget newsletter_widget">
                                <h4 className="widget_title">Newsletter</h4>

                                <form action="#">
                                    <div className="form-group">
                                        <input type="email" className="form-control" onFocus="this.placeholder = ''"
                                            onBlur="this.placeholder = 'Enter email'" placeholder='Enter email'
                                            required/>
                                    </div>
                                    <button className="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Subscribe</button>
                                </form>
                            </aside>
                        </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">Not sure which solution fits your business needs?</p>
                                    <button className="btn btn-primary" type="submit">Contact us</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
    </>
  );
}

export async function getStaticPaths() {
    const res = await fetch(CONFIG.SERVER_URL+'getrecentblogs');
    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("/blog/"+arrData[i].nickname);
       }
    return { paths, fallback: true };
    }
  }

export async function getStaticProps({ query, params }) {
  const { nickname } = query || params;
  const res = await fetch(CONFIG.SERVER_URL+'getSingleBlog/'+nickname);
  const postData = await res.json();
  if (!postData) {
    return {
      notFound: true,
    }
  }
  return {
    props: {
      postData,
    },
    revalidate: 10
  };
}

