//"use server"
import { useQuery } from "@tanstack/react-query";
import VideoPopup from "../components/elements/VidepPopup"
import Layout from "../components/layout/Layout"
import Link from "next/link"
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)
            }
        }
    })

    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                    <section id="blog-page" className="pb-60 inner-page-hero blog-page-section">
                        <div className="container">
                        {isFetching ? 
                            <div className="">
                                <div className="">
                                    <p className='text-mute text-center'>Loading...</p>
                                </div>
                            </div>
                            : isError ?
                            <div className="">
                                <div className="">
                                    <p className='text-danger text-center'>{error.message}</p>
                                </div>
                            </div>
                            :
                            <>
                                {(data && data?.payload?.blogdata?.length > 0) ?
                                <>
                                    {/* WIDE BLOG POST */}
                                    <div className="blog-post wide-post wow fadeInUp">
                                        <div className="row d-flex align-items-center">
                                            {/* BLOG POST IMAGE */}
                                            <div className="col-md-6">
                                                <div className="blog-post-img">
                                                    <img
                                                        className="img-fluid r-16"
                                                        src={`${data?.payload?.image_url}/${data?.payload?.blogdata[0].meta_value}`}
                                                        alt="blog-post-image" />
                                                </div>
                                            </div>
                                            {/* BLOG POST TEXT */}
                                            <div className="col-md-6">
                                                <div className="blog-post-txt">

                                                    <h3 className="s-38 w-700">
                                                        <Link href={data?.payload?.blogdata[0].guid}> {data?.payload?.blogdata[0].post_title}</Link>
                                                    </h3>
                                                    {/* Text */}
                                                    {/* <p>{data?.payload?.blogdata[0].post_content.substring(0, 250)}</p> */}
                                                    <p dangerouslySetInnerHTML={{ __html: data?.payload?.blogdata[0].post_content.length > 250 ? data?.payload?.blogdata[0].post_content.substring(0, 250) + ' ...' : data?.payload?.blogdata[0].post_content.substring(0, 250) }} />
                                                    {/* Post Meta */}
                                                    <div className="blog-post-meta mt-30">
                                                        <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(data?.payload?.blogdata[0]?.post_date).toDateString()}</p></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>	{/* END BLOG POST TEXT */}
                                        </div>   {/* End row */}
                                    </div>	{/* END WIDE BLOG POST */}
                                    {/* POSTS WRAPPER */}
                                    <div className="posts-wrapper">
                                        <div className="row">
                                            {/* BLOG POST #1 */}
                                            {data?.payload?.blogdata.map((item, index)=>{
                                                if(index > 0){
                                                    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={`${data?.payload?.image_url}/${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>
                                                                    </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>
                                    </div>	{/* END POSTS WRAPPER */}

                                    <div className="blog-post square-post">
                                        <div className="row">
                                            <div className="col">
                                                {/* SQUARE BLOG POST WRAPPER */}
                                                <div className="square-post-wrapper bg--black-400 block-shadow r-16 wow fadeInUp">
                                                    <div className="row d-flex align-items-center">
                                                        {/* BLOG POST TEXT */}
                                                        <div className="col-md-6 order-last order-md-2">
                                                            <div className="blog-post-txt color--white">

                                                                <h4 className="s-34 w-700 mb-20">
                                                                    <Link href="/single-post">Lipsum sodales sapien Martex aliquet blandit
                                                                        augue gravida posuere
                                                                    </Link>
                                                                </h4>
                                                                {/* Text */}
                                                                <p>Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida porta
                                                                    undo velna dolor libero risus aliquet tempus posuere vitae tempor
                                                                </p>
                                                                {/* Post Meta */}
                                                                <div className="blog-post-meta mt-30">
                                                                    <ul className="post-meta-list ico-10">
                                                                        <li><p className="w-500">MermsEmr  Team</p></li>
                                                                        <li className="meta-list-divider"><p><span className="flaticon-minus" /></p></li>
                                                                        <li><p>Feb 12, 2023</p></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {/* BLOG POST IMAGE */}
                                                        <div className="col-md-6 order-first order-md-2">
                                                            <div className="blog-post-img video-preview">
                                                                {/* Play Icon */}
                                                                <VideoPopup style={1}/>
                                                                {/* Preview Image */}
                                                                <img className="img-fluid" src="/images/blog/post-10-img.jpg" alt="video-preview" />
                                                            </div>
                                                        </div>
                                                    </div>	  {/* End row */}
                                                </div>	{/* END SQUARE BLOG POST WRAPPER */}
                                            </div>
                                        </div>	  {/* End row */}
                                    </div>	{/* END SQUARE BLOG POST */}
                                </>
                                :
                                <div className="">
                                    <div className="">
                                        <p className='text-mute text-center'>No Blog Found!</p>
                                    </div>
                                </div>
                                }
                            </>
                        }
                        </div>	   {/* End container */}
                    </section>	{/* END BLOG POSTS LISTING */}
                    {/* PAGE PAGINATION
			============================================= */}

                    {/* DIVIDER LINE */}
                    <hr className="divider" />
                    {/* NEWSLETTER-1
			============================================= */}

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