import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import Layout from "../Partials/Layout";
import CommonHead from "../UserHeader/CommonHead";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";

export default function BlogItem(props) {

    const apiCall = new usersService()
    const navigate = useNavigate()

    const [blogdata, setBlogdata] = useState({loading: true, data:{}})

    const [selectTab, setValue] = useState("today");
    const filterHandler = (value) => {
        setValue(value);
    };
    const queryParams = new URLSearchParams(location?.search);
    const blog_id = queryParams.get("blog_id");
    
    useEffect(()=>{
        if(!blog_id){
            navigate('/',{replace:true})
        }
        apiCall.getSingleBlogData({blog_id}).then(res => {
            setBlogdata({loading: false, data:res.data})
        }).catch(error => {
            setBlogdata({loading: false, data:{}})
            console.log('ERROR', error)
        })
    },[blog_id])
    return (
        <Layout>
            <CommonHead
                commonHeadData={props.commonHeadData}
            />
            <div className="notification-page w-full mb-10">
                <div className="mb-5">
                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                        <span
                            className={`${selectTab === "today" ? "block" : "hidden"}`}
                        >
                        {blogdata.data?.blogdata?.[0]?.post_title}
                        </span>
                    </h1>
                </div>
                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
                    {blogdata.loading ? 
                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
                    :
                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
                        <div className="w-full">
                            {/* heading */}
                            <div className="sm:flex justify-between items-center mb-6">
                                {/* <div className="mb-5">
                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                                        <span
                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
                                        >
                                        {blogdata.data?.blogdata?.[0]?.post_title}
                                        </span>
                                    </h1>
                                </div> */}
                                {/* <div className="slider-btns flex space-x-4">
                                </div> */}
                            </div>
                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
                            </div>
                    </div>
                    :
                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
                    }  
                </div>
            </div>
        </Layout>
    );
}