import { useRouter } from "next/router"
import Layout from "../../../components/layout/Layout"
import Link from "next/link"
import { useQuery } from "@tanstack/react-query"
import queryKeys from "../../../components/queryclientProvider/queryKeys"

export default function Home() {

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.blog,
        queryFn: async () => {
            try {
                const blog_url = 'https://blogdata.chiefsoft.net/mermsblogdata/mermsemr';
                const res = await fetch(blog_url)
                const data = await res.json()
                return data
            }
            catch(e){
                return(e)
            }
        }
    })

    let {query} = useRouter()

    const blogData = data?.payload?.blogdata
    const imageURL = data?.payload?.image_url

    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                {isFetching ? 
                    <div className="pb-90 inner-page-hero blog-page-section">
                        <div className="">
                            <p className='text-mute text-center'>Loading...</p>
                        </div>
                    </div>
                    : isError ?
                    <div className="pb-90 inner-page-hero blog-page-section">
                        <div className="">
                            <p className='text-danger text-center'>{error.message}</p>
                        </div>
                    </div>
                    :
                    <>
                        <section id="single-post" className="pb-90 inner-page-hero blog-page-section">
                            <div className="container">
                                <div className="row justify-content-center">
                                    {/* SINGLE POST CONTENT */}
                                    <div className="col-xl-10">
                                        {blogData?.filter(item => item?.id == query?.id).length > 0 ?
                                        <>
                                            {blogData?.filter(item => item?.id == query?.id).map(blog => {
                                                return (
                                                    <div key={blog?.id} className="post-content">
                                                        {/*  SINGLE POST TITLE */}
                                                        <div className="single-post-title text-center">
                                                            {/* Post Tag */}
                                                            {/* <span className="post-tag color--green-400">Community</span> */}
                                                            {/* Title */}
                                                            <h2 className="s-46 w-700">{blog?.post_title}</h2>
                                                            {/* Post Meta */}
                                                            <div className="blog-post-meta mt-35">
                                                                <ul className="post-meta-list ico-10">
                                                                    <li><p className="w-500">MERMS </p></li>
                                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                                    <li><p>{new Date(blog?.post_date).toDateString()}</p></li>
                                                                </ul>
                                                            </div>
                                                        </div>	{/* END SINGLE POST TITLE */}
                                                        {/* SINGLE POST IMAGE */}
                                                        <div className="blog-post-img py-50">
                                                            <img className="img-fluid r-16" src={`${imageURL}/${blog?.meta_value}`} alt="blog-post-image" />
                                                        </div>
                                                        {/* SINGLE POST TEXT */}
                                                        <p dangerouslySetInnerHTML={{ __html: blog?.post_content }} />
                                                        {/* END SINGLE POST TEXT */}

                                                    </div>
                                                )
                                            })}
                                        </>
                                        :
                                        <div className="">
                                            <p className='text-danger text-center'>Error! Blog not found.</p>
                                        </div>
                                        }
                                    </div>	{/* END  SINGLE POST CONTENT */}
                                </div>    {/* End row */}
                            </div>    {/* End container */}
                        </section>	{/* END SINGLE POST */}
                        {/* BLOG-1
                ============================================= */}
                        <section id="blog-1" className="bg--white-300 py-100 blog-section division">
                            <div className="container">
                                {/* SECTION TITLE */}
                                <div className="row justify-content-center">
                                    <div className="col-md-10 col-lg-9">
                                        <div className="section-title mb-70">
                                            <h2 className="s-50 w-700">Recent Postings</h2>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    {/* BLOG POST #1 */}
                                    {blogData?.filter(item => item.id != query?.id).map((item, index)=>{
                                        if(index < 3){
                                            return (
                                                <div key={item.id || index} className="col-md-6 col-lg-4">
                                                    <div className="blog-post mb-40 wow fadeInUp clearfix">
                                                        {/* BLOG POST IMAGE */}
                                                        <div className="blog-post-img mb-35">
                                                            <img 
                                                                className="img-fluid r-16" 
                                                                src={`${imageURL}/${item.meta_value}`}
                                                                alt="blog-post-image" 
                                                            />
                                                        </div>
                                                        {/* BLOG POST TEXT */}
                                                        <div className="blog-post-txt">
                                                            {/* Post Tag */}
                                                            {/* <span className="post-tag color--red-400">Product News</span> */}
                                                            {/* Post Link */}
                                                            <h6 className="s-20 w-700">
                                                                {/* <Link href={item.guid}> {item.post_title}</Link> */}
                                                                <Link 
                                                                    href={`/blogview/${item.id}`}
                                                                    // href={{pathname: '/merms-blogview', query:{...item, image_url:data?.payload?.image_url}}}
                                                                > 
                                                                    {item.post_title}
                                                                </Link>
                                                            </h6>
                                                            {/* Text */}
                                                            <p dangerouslySetInnerHTML={{ __html: item.post_content.length > 250 ? item.post_content.substring(0, 250) + ' ...' : item.post_content.substring(0, 250) }} />
                                                            {/* Post Meta */}
                                                            <div className="blog-post-meta mt-20">
                                                                <ul className="post-meta-list ico-10">
                                                                    <li><p className="p-sm w-500">Merms</p></li>
                                                                    <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                                    <li><p className="p-sm">{new Date(item.post_date).toDateString()}</p></li>
                                                                </ul>
                                                            </div>
                                                        </div>	{/* END BLOG POST TEXT */}
                                                    </div>
                                                </div>	
                                            )
                                        }
                                    })}	
                                    {/* END BLOG POST #1 */}
                                </div>    {/* End row */}
                            </div>    {/* End container */}
                        </section>
                    </>
                }
                </div>

            </Layout>
        </>
    )
}