import React, { useMemo } from "react";
import LoadingAnimation from "../Loading/LoadingAnimation";
import { NavLink, useParams } from "react-router-dom";
import GetInTouchCard from "../../../component/Footer/GetInTouchCard";
import AnnouncementCard from "./AnnouncementCard";
import "./announcement.css";
import {
  useGetAnnouncements,
  useGetSingleAnnouncements,
} from "../../../apis/Announcements";

/**
 *
 * AnnouncementSinglePage for showing single announcement
 * @module AnnouncementSinglePage
 * @returns {JSX.Element}
 */
const AnnouncementSinglePage = () => {
  /**
   * @constant
   * @type {string}
   * @description id for getting single announcement
   * @name id
   * @memberof module:AnnouncementSinglePage
   */
  const { id } = useParams();
  /**
   * @constant
   * @type {object}
   * @description React query  hook  for getting single announcement
   * @name useGetSingleAnnouncements
   * @memberof module:AnnouncementSinglePage
   */
  const { data: singleAnnounce, isLoading: announceLoading } =
    useGetSingleAnnouncements(id);
  /**
   * @constant
   * @type {object}
   * @description React query  hook  for getting all announcements
   * @name useGetAnnouncements
   * @memberof module:AnnouncementSinglePage
   *
   */
  const { data: announce } = useGetAnnouncements();
  /**
   *
   * @type {object}
   * @description announcementData  for getting single announcement data
   * @name announcementData
   * @memberof module:AnnouncementSinglePage
   */
  const announcementData = useMemo(() => {
    return singleAnnounce?.data?.data || {};
  }, [singleAnnounce?.data, id]);
  /**
   *
   * @type {Array.<object>}
   * @description otherAnnouncementData  for getting other announcement data
   * @name otherAnnouncementData
   * @memberof module:AnnouncementSinglePage
   */
  const otherAnnouncementData = useMemo(() => {
    let temp_data = announce?.data?.data?.results || [];
    let filteredData = temp_data.filter(
      (el, i) => parseInt(el.id) !== parseInt(id) && i <= 3
    );
    return filteredData;
  }, [announce?.data, id]);
  if (announceLoading) {
    return <LoadingAnimation />;
  }
  return (
    <>
      <div className="singleEvent_container">
        <div className="single_event_body single_announce_body">
          <div className="single_event_body_left single_announce_left">
            <div className="content_body ">
              <div className="single_announcement_body">
                <div className="news_publish_date"></div>
                <h2 className="main-title mb-2">
                  {announcementData.title || ""}
                </h2>
                <div className="single_news_body  announcement_content_wrapper">
                  {/* <h3 className="mb-3">Overview </h3> */}
                  {
                    <p
                      dangerouslySetInnerHTML={{
                        __html: announcementData.announcement_content,
                      }}
                    />
                  }
                </div>
                <div className="news_publish_date mb-2">
                  <h4 className="mb-2 me-3">
                    {announcementData.company || ""}
                  </h4>
                  <ion-icon name="calendar-clear-outline"></ion-icon>
                  <small className="ms-1">{announcementData.created}</small>
                </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>Announcements</span>
                </h2>
              </div>
            </div>
            {otherAnnouncementData?.map((item, i) => {
              return (
                <NavLink
                  key={i}
                  to={`../announcement/announcementdetail/${item?.id}`}
                >
                  <AnnouncementCard dat={item} />
                </NavLink>
              );
            })}

            <NavLink to="../announcement">
              <div className="event_registration_bt">
                <button>View More</button>
              </div>
            </NavLink>
            {/* ----------------------------------------------------- */}
          </div>
        </div>
      </div>
    </>
  );
};

export default AnnouncementSinglePage;