import React from "react";
import "./index.css";
/**
 * Represents a search component for filtering and sorting announcements.
 * @interface
 * @param {object} props - The component's props.
 * @param {boolean} props.gridView - A boolean indicating whether the view is in grid mode.
 * @param {function} props.setGridView - A function to toggle between grid and list view.
 * @param {boolean} props.filterDropdown - A boolean indicating whether the filter dropdown is open.
 * @param {function} props.setFilterDropdown - A function to toggle the filter dropdown.
 * @param {function} props.setSearchInput - A function to set the search input value.
 * @param {function} props.setSortBy - A function to set the sorting criteria.
 * @returns {JSX.Element} The search component.
 */
const Search = ({
  gridView,
  setGridView,
  filterDropdown,
  setFilterDropdown,
  setSearchInput,
  setSortBy,
}) => {
  return (
    <div className="search_heading">
      <div className="announcement_search">
        <div className="left_announcement_search">
          <div className="left_announcement_search">
            <ion-icon name="search"></ion-icon>
          </div>
          <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="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>
  );
};

export default Search;