'use client'
/*
  Blog Posts Component of Blog Page
  - Marquee Data
  - Blog Post Item Data
*/
import { RootState } from '@/redux/slices';
import { AppDispatch } from '@/redux/store';
import getBlogList from '@/redux/thunks/Blog/blog.thunk';
import BlogPostItem from '@/src/components/BlogPost';
import MarqueeSlide from '@/src/components/MarqueeSlide';
import { BlogData } from '@/src/types/api/blog.type';
import { BlogContent } from '@/src/types/StaticContent/blog.content.type';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styles from "./AllBlogPosts.module.scss";


// All Blog Posts Component
const AllBlogPosts: React.FC<{ BlogContent: BlogContent }> = ({ BlogContent }) => {

    const dispatch = useDispatch<AppDispatch>();
    const [postCount, setPostCount] = useState(3)
    const [search, setSearch] = useState('');
    // Fetch the blog list from the API
    const { blogList } = useSelector((state: RootState) => state.blog);

    /**
     * Dispatches an action to fetch the blog list from the API.
     * Utilizes the current state values for pagination and search.
     */

    const FetchBlogList = () => {
        dispatch(getBlogList({
            page: 1,
            perPage: postCount,
            search: search
        }));
    }

    /**
     * Fetch the blog list from the API
     */
    useEffect(() => {
        FetchBlogList();
    }, [postCount]);


    /**
     * Handles search input change.
     * Updates the search state and fetches the blog list if the search value is empty.
     * @param {string} searchValue The new search value.
     */
    const handleSearch = (searchValue: string) => {
        setSearch(searchValue);
        if (searchValue.length === 0) {
            FetchBlogList();
        }
    }

    return (
        <>
            <section className={`${styles.AllBlogPosts} ptb112`}>
                <div className={`mb-[20px] md:mb-[50px] lg:mb-[64px]`}>
                    <MarqueeSlide content={BlogContent?.MarqueeData?.TITLE} />
                </div>
                <div className={`container`}>
                    <div className={`${styles.BlogSearchBar} bg-bgColor w-full py-4 mb-0 sticky top-[58px] lg:top-[68px] xxl:top-[87px] z-10`}>
                        <form action="" className={`relative max-w-[600px] mx-auto`}>
                            <input
                                value={search}
                                onChange={e => handleSearch(e.target.value)}
                                className={`w-full bg-white rounded-[200px] h-[44px] sm:h-[50px] lg:h-[60px] py-[10px] md:py-[15px] px-[20px] pr-[70px]`}
                                type="text"
                                placeholder={BlogContent?.SEARCH?.PLACEHOLDER}
                                onKeyDown={e => {
                                    if (e.key === 'Enter') {
                                        e.preventDefault();
                                    }
                                }}
                            />
                            <button
                                onClick={FetchBlogList}
                                type='button' name='button' className={`${styles.SearchBtn} flex items-center justify-center absolute rounded-full right-0 top-[50%] -translate-y-1/2 w-[44px] h-[44px] sm:w-[50px] sm:h-[50px] lg:w-[60px] lg:h-[60px]`}>
                                <i className={`${styles.SearchIcon} block w-[22px] h-[22px]`}></i>
                            </button>
                        </form>
                    </div>
                    {/* Blog List Api integration */}
                    {blogList?.data?.length === 0 ? (
                        <div className="flex items-center justify-center mt-[30px] md:mt-[40px] lg:mt-[50px]">
                            <p>{BlogContent?.BLOG_LIST?.NO_POSTS_FOUND}</p>
                        </div>
                    ) : (
                        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] lg:gap-[20px] xl:gap-[25px] xxl:gap-[40px] xxxl:gap-[50px] mt-[30px] md:mt-[40px] lg:mt-[50px] justify-between`}>
                            {blogList?.data?.map((blogItem: BlogData, blogItemKey: number) => {
                                return (
                                    <BlogPostItem key={blogItemKey} BlogPostContent={blogItem} isHomePage={false} />
                                )
                            })}
                        </div>
                    )}
                    {/* Load More Button Start */}
                    {blogList?.meta?.totalCount !== blogList?.data?.length && <div className={`w-full text-center mt-[30px] md:mt-[40px] lg:mt-[50px] xxl:mt-[65px]`}>
                        <button
                            onClick={() => setPostCount(prew => prew + 3)}
                            className={`PrimaryBtn m-auto py-[10px] px-[20px] sm:py-[15px] sm:px-[30px] lg:py-[20px] lg:px-[40px] bg-primaryColor text-white rounded-[200px]`}
                        >
                            <i className={`Icon IconBottomArrow w-[15px] h-[15px] !bg-white`}></i>
                            {BlogContent?.BLOG_LIST?.LOAD_MORE}
                        </button>
                    </div>}
                    {/* Load More Button End */}
                </div>
            </section>
        </>
    )
}

export default AllBlogPosts