import React, { useEffect, useRef } from 'react';
import './styles.scss';
import '../style.scss'
import { Link, useNavigate, useParams } from 'react-router-dom';
import ColumnWrapper from 'Layout/ColumWraper';
import NewsletterSubscriber from 'components/Sections/Subscribe';
import PostBody from './PostBody';
import PostTitle from './PostTitle';
import useMediaQuery from 'hooks/useMediaQuery';
import { useDispatch, useSelector } from 'react-redux';
import { fetchCurrentPost, selectCurrentPost, selectCurrentPostIsLoading } from 'store/slices/BlogSlice';
import { getImageUrl } from 'helpers';
import PostRelated from './PostRelated';
import { useAnimation } from 'hooks/useAnimation';
import useAnalyticsEventTracker from 'hooks/useAnalyticsEventTracker';
import List from 'components/ProductCard/ProductCardList';
import Button from 'components/common/Buttons';



const CurrentPost = () => {
    const dispatch = useDispatch();
    const { postSlug } = useParams();
    const navigate = useNavigate()

    const data = useSelector(selectCurrentPost);
    console.log(data);

    const loading = useSelector(selectCurrentPostIsLoading);
    const isTablet = useMediaQuery('max-width: 1024px');
    const container = useRef();
    useAnimation({
        items: ['.post-anchors', '.post-product'],
        container,
        dependencies: [loading],
    })

    const { title, time_to_read, createdAt, image, tags, content, product_widgets } = data;
    useEffect(() => {
        if (postSlug) {
            // @ts-ignore
            dispatch(fetchCurrentPost({ postSlug }));
        }
    }, [dispatch, postSlug]);

    const eventTracker = useAnalyticsEventTracker({ category: "User", action: "Purchase Proxies" });


    const src = getImageUrl(image);

    const navItems = content?.filter(item => item.level);

    const handleClick = (index) => {
        const postBody = document.querySelector('.post-body');
        const headings = postBody.querySelectorAll('h1, h2, h3, h4, h5, h6');
        const offsetTop = 100;

        const allAnchors = document.querySelectorAll('.post-anchors-item');
        allAnchors.forEach((anchor) => {
            anchor.classList.remove('active');
        });

        const clickedAnchor = document.querySelector('.post-anchors-item:nth-child(' + (index + 1) + ')');
        clickedAnchor.classList.add('active');

        window.scrollTo({
            top: headings[index].getBoundingClientRect().top + window.scrollY - offsetTop,
            behavior: 'smooth',
        });
    };


    if (!loading && Object.keys(data).length === 0) {
        navigate("*");
        return null;
    }

    const Navigation = () => {
        return (
            navItems && (
                <div ref={container}>
                    {
                        !isTablet &&
                        <div className='post-anchors'>
                            {navItems.map((item, index) => (
                                <div
                                    key={index}
                                    className={`post-anchors-item ${index === 0 ? 'active' : ''}`}
                                    onClick={() => handleClick(index)}
                                >
                                    {item.children[0].text}
                                    <div className='post-anchors-item__dot'></div>
                                </div>
                            ))}
                        </div>
                    }


                    {product_widgets.map((item, index) => (
                        <Link to={item.button_link} key={index} className="post-product" onClick={eventTracker}>
                            <div className="post-product__icon"><img src={getImageUrl(item.image)} alt="" /></div>
                            <div className="post-product__info">
                                <div className="description2 post-product__info-title">{item.title}</div>
                            </div>
                            <div className='post-product__body'>
                                <div className='post-product__body-2'>
                                    <List color={item.color_list_icon} lists={item.lists} />
                                    <Button text={item.button_text} />
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>
            )
        );
    };


    return !loading && (
        <>
            <PostTitle title={title} tags={tags} createdAt={createdAt} readTime={time_to_read} />
            <ColumnWrapper
                SideText={!isTablet && <Navigation />}
                children={<PostBody image={src} content={content} />}
            />
            {
                isTablet &&
                <div className='inner-container'>
                    <Navigation />
                </div>

            }
            <PostRelated />
            <NewsletterSubscriber isLoading={loading} />
        </>
    );
};

export default CurrentPost;

• [D] PostAnchors
• [D] PostBody
• [D] PostRelated
• [D] PostTitle
• [F] index.jsx
  Delete
• [F] styles.scss
  Delete