import React, { useEffect, useMemo, useState } from "react";
import { useParams } from "react-router-dom";
import useToggle from "../../Hooks/useToggle";
import BackToTop from "../BackToTop";
import FooterHomeOne from "../HomeOne/FooterHomeOne";
import Drawer from "../Mobile/Drawer";
import Blog from "./Blog";
import BlogData from "../../Services/BlogData";
import BlogSideBar from "./BlogSideBar";
import HeaderNews from "./HeaderNews";
import HeroNews from "./HeroNews";
import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";

/**
 * Renders the blog detail page.
 */
function BlogDetail() {
  const [drawer, drawerAction] = useToggle(false);
  const [isLoading, setIsLoading] = useState(false);
  const [blogs, setBlogs] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    const fetchBlogs = async () => {
      setIsLoading(true);
      try {
        const res = await BlogData();
        setBlogs(res.data);
      } catch (err) {
        console.log("Error loading blogdata", err);
      } finally {
        setTimeout(() => setIsLoading(false), 1500);
      }
    };

    fetchBlogs();
  }, []);

  const blogItem = useMemo(() => {
    return blogs.blogdata?.find((item) => +item.id === +id);
  }, [blogs, id]);

  return (
    <>
      {/* Renders the drawer component */}
      <Drawer drawer={drawer} action={drawerAction.toggle} />

      {/* Renders the header component */}
      <HeaderNews action={drawerAction.toggle} />

      {/* Renders the hero section */}
      <HeroNews
        title="Blog"
        breadcrumb={[
          { link: "/", title: "Home" },
          { link: "/blog", title: "Blogs" },
          {
            link: `/blog/blogdetail/${id}`,
            title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
          },
        ]}
      />

      {/* Renders the blog content and sidebar */}
      <section className="blogpage-section">
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-7">
              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
            </div>
            <div className="col-lg-4 col-md-5">
              <BlogSideBar blogs={blogs} />
            </div>
          </div>
        </div>
      </section>

      {/* Renders the footer */}
      <FooterHomeOne />

      {/* Renders the back-to-top button */}
      <BackToTop />
    </>
  );
}

export default BlogDetail;