import React, {ReactNode, useEffect, useState} from 'react';
import NewsArticleSlider from "../UI/NewsArticleSlider/NewsArticleSlider";
import {NewsSingle} from "../../models/Wordpress/NewsSingleWP";
import {getPostsWP} from "../../API/wordpress";
import Slider from "react-slick";

type DashboardSliderProps = {
    children?: ReactNode
}

const settings =  {
    arrows: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
}



const DashboardSlider = ({children}: DashboardSliderProps) => {

    const [isLoading, setIsLoading] = useState(true);
    const [sliderArticles, setSliderArticles] = useState<NewsSingle[]>([]);

    const [sliderArticlesOptions, setsliderArticlesOptions] = useState({
        totalPages: 1,
        currentPage: 1,
        currentOrder: "desc",
        currentCategory: 'dua-slider',
    });


    const getSliderArticles = async () => {
        setIsLoading(true);
        const responsePosts = await getPostsWP(
            sliderArticlesOptions.currentPage,
            sliderArticlesOptions.currentOrder,
            sliderArticlesOptions.currentCategory
        );
        setIsLoading(false);

        // Fetching the featured image URL for each post
        const newsWithImages = await Promise.all(
            responsePosts.data.map(async (post) => {
                // Check if _embedded property exists and if featured media is available
                const featuredMediaId = post.featured_media;
                let featuredImageUrl = '';
                if (featuredMediaId) {
                    try {
                        const response = await fetch(`http://localhost/egovsupport/wp-json/wp/v2/media/${featuredMediaId}`);
                        const data = await response.json();
                        featuredImageUrl = data.source_url || '';
                    } catch (error) {
                        console.error('Error fetching featured image:', error);
                    }
                }
                return { ...post, featuredImageUrl };
            })
        );

        setSliderArticles(newsWithImages);
    };

    useEffect(() => {
        getSliderArticles();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);


    return (
        <Slider {...settings}>
            {
                sliderArticles && sliderArticles.map((article) => {
                    return (
                        <div key={article.id} className= "slide-container">
                            <NewsArticleSlider
                                key={article.id}
                                image={article.acf!.article_image! ? article.acf!.article_image!.url : ''}
                                title={article.acf!.title}
                                subtitle={article.acf!.subtitle}
                                content={article.acf!.content}
                                btnUrl={article.acf!.button_url.url}
                                btnLabel={article.acf!.button_label}
                            />
                        </div>
                    )
                })
            }
        </Slider>
    );
}

export default DashboardSlider;