import {useEffect, useState} from "react";
import ReactDOM from "react-dom";
// import {getCategoriesWP, getPostsWP} from "../../API/wordpress";
import {NewsSingle} from "../../models/Wordpress/NewsSingleWP";
import "./news.scss";
import Pagination from "../UI/DuaList/Pagination/Pagination";
import SingleNew from "./SingleNew/SingleNew";
import Sorting from "./Sorting/Sorting";
import DuaLoader from "../UI/Loader/DuaLoader/DuaLoader";
import FilterSelect from "./FilterSelect/FilterSelect";
import dayjs from "dayjs";
import useAbortController from "../../hooks/useAbortController";


const News = () => {
	useAbortController()
	const [news, setNews] = useState<NewsSingle[]>([]);
	const [categoryMap, setCategoryMap] = useState<any>({});
	const [isLoading, setIsLoading] = useState(true);
	const [newsOptions, setNewsOptions] = useState({
		totalPages: 1,
		currentPage: 1,
		currentOrder: "desc",
		currentCategory: "",
	});
	// const getNews = async () => {
	// 	setIsLoading(true);
	// 	const responsePosts = await getPostsWP(
	// 		newsOptions.currentPage,
	// 		newsOptions.currentOrder,
	// 		newsOptions.currentCategory
	// 	);
	// 	setIsLoading(false);
	// 	const responseCategories = await getCategoriesWP();

	// 	// Extracting total pages and current page...

	// 	const catmap: { [key: number]: string } = {};

	// 	responseCategories.data.forEach((category) => {
	// 		catmap[category.id] = category.name;
	// 	});

	// 	// 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 };
	// 		})
	// 	);

	// 	setNews(newsWithImages);
	// 	setCategoryMap(catmap);
	// };



	// useEffect(() => {
	// 	getNews();
	// }, [
	// 	newsOptions.currentPage,
	// 	newsOptions.currentOrder,
	// 	newsOptions.currentCategory,
	// ]);

	return (
		<div id="news">
			{
                isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
			<div className="filters-wrapper container-flow">
				<div className="row justify-content-end">
					<div className="col-4 d-flex justify-content-end">
						<div className="second-step">
							<Sorting
								isLoading={isLoading}
								currentOrder={newsOptions.currentOrder}
								setOrder={(order) => {
									setNewsOptions({
										...newsOptions,
										currentOrder: order,
										currentPage: 1,
									});
								}}
							/>
						</div>
						<div className="third-step">
							<FilterSelect
								options={categoryMap}
								currentCategory={newsOptions.currentCategory}
								setCategory={(category) => {
									setNewsOptions({
										...newsOptions,
										currentCategory: category,
										currentPage: 1,
									});
								}}
							/>
						</div>
					</div>
				</div>
			</div>
			<div className="posts-wrapper first-step">
				
				{
					news.length > 0 &&  
					news.map((newsingle) => {
						const dateModifiedDate = dayjs(newsingle.modified);
						const dateModified = dateModifiedDate.format('DD.MM.YYYY')
						return (
							<div key={newsingle.id} className="news--wrapper">
								<SingleNew
									date={dateModified}
									title={newsingle.title.rendered}
									labels={newsingle.categories.map((cat) => categoryMap[cat])}
									content={newsingle.content.rendered}
									acf={newsingle.acf}
									featuredImageUrl={newsingle.featuredImageUrl} // Pass the featured image URL
								/>
							</div>
						);
					})
				}
			{
				news.length == 0 &&
				<div className="container text-center empty-cat">
					Δεν υπάρχουν άρθρα για προβολή
				</div>
			}
			
			</div>
			<div className="pagination-wrapper d-flex justify-content-center fourth-step">
				<Pagination
					isLoading={isLoading}
					currentPage={newsOptions.currentPage}
					totalPages={newsOptions.totalPages}
					setPage={(page) => {
						setNewsOptions({
							...newsOptions,
							currentPage: page,
						});
					}}
				/>
			</div>
		</div>
	);
};
export default News;