import React from "react";
import "../Share/share.css";
import RecentshareopeningsList from "../RecentOpenings/RecentOpenings";
import { useState } from "react";

/**
 * Represents  Share component
 * @module Share
 * @param userroles {object} - user role
 * @return {JSX.Element}
 */
const Share = ({ userroles }) => {
  /**
   * React useState for filter dropdown
   * @name filterDropdown
   * @memberof module:Share
   * @type {object}
   * @default false
   *
   */
  const [filterDropdown, setFilterDropdown] = useState(false);
  /**
   * React useState for search input
   * @name searchInput
   * @memberof module:Share
   * @type {object}
   * @default {" "}
   */
  const [searchInput, setSearchInput] = useState("");
  /**
   *  React useState for sort by
   *  @name sortBy
   *  @memberof module:Share
   *  @type {object}
   *  @default {" "}
   */
  const [sortBy, setSortBy] = useState("");
  return (
    <div className="sharehistory_container">
      <div className="sharehistory_heading flex justify-between">
        <h2 className="main-title">Share</h2>
        <div className="sharehistory_search ">
          <div className="left_sharehistory_search">
          
            <div className="search_input">
              {/* <ion-icon name="search-outline"></ion-icon> */}
              <input
                type="text"
                placeholder="Search"
                onChange={(e) => setSearchInput(e.target.value)}
              />
            </div>
            <div className="left_sharehistory_search">
              <ion-icon name="search"></ion-icon>
            </div>
          </div>
          <div className="right_sharehistory_search">
            <div
              className="sharehistory_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="sharehistory_filter_dropdown">
                  <p onClick={() => setSortBy("AZ")}>A - Z</p>
                  <p onClick={() => setSortBy("ZA")}>Z - A</p>
                  <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="share_history_body">
        <RecentshareopeningsList
          userroles={userroles}
          sortBy={sortBy}
          searchInput={searchInput}
        />
      </div>
    </div>
  );
};

export default Share;