import React, { useMemo } from "react";
import { NavLink, useParams } from "react-router-dom";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { Image } from "antd";
import "../News/newsdetails.css";
import NewsCard from "./NewsCard";
import GetInTouchCard from "../../../component/Footer/GetInTouchCard";
import { useGetNews, useGetSingleNews } from "../../../apis/News";

/**
 * Represents the NewsDetail page component
 * @module NewsDetail
 * @returns {JSX.Element}
 */
function NewsDetail() {
  // Getting news id from url
  const { id } = useParams();
  /**
   * React query hook that fetches the news data by id
   * @name useGetNews
   * @type {Function}
   * @memberof module:NewsDetail
   */
  const { data: singleNews, isLoading: newsLoading } = useGetSingleNews(id);
  /**
   *  React query hook that fetches the news data
   * @name useGetNews
   * @type {Function}
   * @memberof module:NewsDetail
   */
  const { data: news } = useGetNews();
  /**
   * React hook that memoizes the news data
   * @name newsData
   * @memberof module:NewsDetail
   * @type {Object}
   */
  const newsData = useMemo(() => {
    return singleNews?.data?.data || {};
  }, [singleNews?.data, id]);
  // Getting  other news
  const otherNewsData = useMemo(() => {
    let temp_data = news?.data?.data?.results || [];
    let filteredData = temp_data.filter(
      (el, i) => parseInt(el.id) !== parseInt(id) && i <= 3
    );
    return filteredData;
  }, [news?.data, id]);
  if (newsLoading) {
    return <LoadingAnimation />;
  }
  return (
    <div className="singleEvent_container">
      <div className="single_event_body single_news_body">
        <div className="single_event_body_left single_news_body_left">
          <div className="single_event_heading">
            <div className="event_heading_text">
              <h3>{newsData.title}</h3>
            </div>
          </div>
          <div className="content_body">
            <div className="event_image">
              <Image
                src={newsData.image}
                width={"90%"}
                preview={false}
                alt=""
              />
            </div>
            <div className="news_content">
              <div className="news_content_wrapper">
                {<p dangerouslySetInnerHTML={{ __html: newsData.content }} />}
              </div>
            </div>
            <GetInTouchCard />
          </div>
        </div>

        <div className="single_event_body_right other_news">
          <div className="single_event_heading  ">
            <div className="event_heading_text other_news_heading">
              <h2 className="main-title">
                Other <span>News</span>{" "}
              </h2>
            </div>
          </div>
          {otherNewsData?.map((item, i) => {
            return <NewsCard newsData={item} />;
          })}
          <NavLink to="../news">
            <div className="event_registration_bt">
              <button>View More</button>
            </div>
          </NavLink>
        </div>
      </div>
    </div>
  );
}
export default NewsDetail;