import React, { useState } from "react";
import "../Announcement/announcement.css";
import LoadingAnimation from "../Loading/LoadingAnimation";
import {NavLink, useRoutes} from "react-router-dom";
import AnnouncementCard from "./AnnouncementCard";
import { useGetAnnouncements } from "../../../apis/Announcements";
import { useMemo } from "react";
/**
 * A page that shows all the announcements
 * @namespace Announcement
 * @module Announcement
 * @returns {React.Component}
 * */

const Announcement = () => {
  /**
   * state to show either grid view or list view
   * @type {boolean}
   * @memberof module:Announcement
   * @name gridView
   * */
  const [gridView, setGridView] = useState(true);
  /**
   *
   * state to show filter dropdown
   * @type {boolean}
   * @memberof module:Announcement
   * @name filterDropdown
   */
  const [filterDropdown, setFilterDropdown] = useState(false);
  /**
   *
   * state to show search input
   * @type {string}
   * @memberof module:Announcement
   * @name searchInput
   */
  const [searchInput, setSearchInput] = useState("");
  /**
   *
   * state to show sort by
   * @type {string}
   * @memberof module:Announcement
   * @name sortBy
   */
  const [sortBy, setSortBy] = useState("");
  /**
   *
   * react query hook to get announcements
   * @type {object}
   * @memberof module:Announcement
   * @name useGetAnnouncements
   */
  const { data: announcements, isLoading } = useGetAnnouncements();
  /**
   *
   * announcement list to show
   * @type {Array.<object>}
   * @memberof module:Announcement
   * @name announcementList
   */
  const announcementList = useMemo(() => {
    const temp = announcements?.data?.data?.results || [];
    if (searchInput) {
      const filteredList = temp.filter((item) =>
        item.title.toLowerCase().includes(searchInput.toLowerCase())
      );
      return filteredList.reverse();
    }
    switch (sortBy) {
      case "OLD":
        return [...temp].reverse();
      case "RECENT":
        return temp;
    }
    return temp;
  }, [announcements?.data, searchInput, sortBy]);

  /**
   * function to get selected view
   * @function getSelectedView
   * @returns {JSX.Element}
   */
  const getSelectedView = () => {
    return (
      <div className="announcement_div">
        {gridView ? (
          <div className="documents_divfor_grid_view">
            {announcementList.map((dat, i) => {
              const text = dat.announcement_content;
              return (
                <div className="individual_announcement_card" key={i}>
                  <NavLink
                    to={`/dashboard/announcement/announcementdetail/${dat.id}`}
                  >
                    <div className="announcement_wrapper"></div>
                  </NavLink>
                  <div className="announcement_card_footer">
                    <div className="announcement_card_footer_content">
                      <div className="announcement_add_to_calander">
                        <small>{dat?.created}</small>
                      </div>
                      <div className="announcement_content_section">
                        <ion-icon name="megaphone-outline"></ion-icon>
                        <h4>{dat?.title}</h4>
                        {/* <div className="announcement_content">
                          {
                            <p
                              className="clamped-text"
                              dangerouslySetInnerHTML={{ __html: text }}
                            />
                          }
                        </div> */}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <>
            <div className="list_container">
              {announcementList.map((dat, i) => {
                return (
                  <NavLink
                    to={`/dashboard/announcement/announcementdetail/${dat.id}`}
                  >
                    <AnnouncementCard dat={dat} />
                  </NavLink>
                );
              })}
            </div>
          </>
        )}
      </div>
    );
  };

  if (isLoading) {
    return <LoadingAnimation />;
  }
  return (
    <div className="announcement_container">
      <div className="announcement_heading">
        <h2 className="main-title">Announcements</h2>
        <div className="announcement_search">
          <div className="left_announcement_search">
            <div className="announcement_search_input">
              <ion-icon name="search-outline"></ion-icon>
              <input
                type="text"
                onChange={(e) => setSearchInput(e.target.value)}
                placeholder="Search"
              />
            </div>
          </div>
          <div className="left_announcement_search">
            <ion-icon name="search"></ion-icon>
          </div>
          <div className="right_announcement_search">
            <div className="announcement_grid_list_view">
              <ul>
                {gridView ? (
                  <li
                    onClick={() => setGridView(!gridView)}
                    style={{
                      background: "#53BF8A",
                      borderRadius: ".2rem",
                      color: "#ffffff",
                    }}
                  >
                    <ion-icon name="grid-outline"></ion-icon>
                  </li>
                ) : (
                  <li onClick={() => setGridView(!gridView)}>
                    <ion-icon name="grid-outline"></ion-icon>
                  </li>
                )}
                {gridView ? (
                  <li onClick={() => setGridView(!gridView)}>
                    <ion-icon name="list-outline"></ion-icon>
                  </li>
                ) : (
                  <li
                    onClick={() => setGridView(!gridView)}
                    style={{
                      background: "#53BF8A",
                      borderRadius: ".2rem",
                      color: "#ffffff",
                    }}
                  >
                    <ion-icon name="list-outline"></ion-icon>
                  </li>
                )}
              </ul>
            </div>
            <div
              className="announcement_filter_div"
              onClick={() => {
                setFilterDropdown(!filterDropdown);
              }}
            >
              <p>Sort by</p>
              {filterDropdown ? (
                <ion-icon name="chevron-up-outline"></ion-icon>
              ) : (
                <ion-icon name="chevron-down-outline"></ion-icon>
              )}
              {filterDropdown && (
                <div className="announcement_filter_dropdown">
                  <p onClick={() => setSortBy("RECENT")}>Recent</p>
                  <p onClick={() => setSortBy("OLD")}>Oldest</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      <div className="navigation_for_mobile">
        <div className="left_mobile_navigation">
          <input
            type="text"
            placeholder="search"
            onChange={(e) => setSearchInput(e.target.value)}
          />
          <ion-icon name="search-outline"></ion-icon>
        </div>
        <div className="right_mobile_navigation">
          <ul>
            <li>
              <ion-icon name="options"></ion-icon>
            </li>
          </ul>
        </div>
      </div>
      <div className="announcement_body mt-3">
        {announcementList.length === 0 ? (
          <div className="empty_announcement_container">
            <div className="announcement_logo">
              <ion-icon name="megaphone-outline"></ion-icon>
              <h3>No Announcements added yet</h3>
              <div className="add_new_announcement">
                <p>
                  Exciting announcements are on the horizon. Stay tuned and be
                  the first to know.
                </p>
              </div>
            </div>
          </div>
        ) : (
          getSelectedView()
        )}
      </div>
    </div>
  );
};

export default Announcement;