Untitled

/** @format */

import * as React from "react";
import { BiArrowBack } from "react-icons/bi";
import "./GalleryHeader.css";

import { useNavigate } from "react-router-dom";
// import MenuComp from "./MenuComp";
import { useDispatch, useSelector } from "react-redux";
import { selectSocketNotificationCount } from "../../../redux/_notification/notificationSelectors";
import { resetSocketNotificationCount } from "../../../redux/_notification/notificationSlice";
import {
  pageTypeSelector,
  scrollAxis,
} from "../../../redux/_page/pageSelectors";
import { selectUser } from "../../../redux/_user/userSelectors";

import { BsBell } from "react-icons/bs";
import { Search, ThreeDotsVerticleIcon } from "../../../Assets/icons";
import { ThemeContext } from "../../Common/ThemeProvider";
import MenuComp from "../socialHeader/MenuComp";

const SocialHeader = () => {
  const dispatch = useDispatch();
  const user = useSelector(selectUser);
  const pageType = useSelector(pageTypeSelector);
  const axisValue = useSelector(scrollAxis);
  const notificationCount = useSelector(selectSocketNotificationCount);
  const navigate = useNavigate();
  const [openMenu, setOpenMenu] = React.useState(false);
  const { theme } = React.useContext(ThemeContext);

  const handleOpenNotification = () => {
    dispatch(resetSocketNotificationCount());
    navigate("/notifications");
  };

  React.useEffect(() => {
    const currentURL = window.location.href;
    console.log("Current URL:", currentURL);
    const savedUrl = localStorage.getItem("currenturl");
    console.log("Save URL:", savedUrl);
    if (currentURL === savedUrl) {
      console.log("SAME");
    } else {
      console.log("OTHER");
      localStorage.setItem("currenturl", currentURL);
    }
  }, []);

  const handlePreviousPage = () => {
    navigate("/");
  };

  const handleOpenMenu = () => {
    setOpenMenu(true);
    window.location.hash = "#profile-menu";
  };

  // theme
  return (
    <>
      <div
        className={
          axisValue === "Up"
            ? `mobile_navbar_section_gallery ${theme}`
            : `hidden_mobile_navbar_section_gallery ${theme}`
        }
      >
        {/* Logo Section */}
        <div className="navbar_logo_gallery">
          
            <div className="header_back_section_gallery">
              <BiArrowBack onClick={handlePreviousPage} />
              <span className="_page_title_name_gallery">
                {/* {pageType.charAt(0).toUpperCase() + pageType.slice(1)} */}
                <div class="search-container">
        <span class="search-icon"><Search/></span>
        <input  type="text" class="search-input" placeholder="Type a command or search" />
    </div>

              </span>
            </div>
          
        </div>

        {/* Other menu */}
        <div className="__other_menu_section_gallery">
          
          {/* Search icon */}
          

          {/* Notification icon */}
          <button
            className={`navbar_icon_btn ${theme}`}
            onClick={handleOpenNotification}
          >
            <BsBell />

            {notificationCount > 0 && (
              <span className="notification_count">{notificationCount}</span>
            )}
          </button>
          <button
            className={`navbar_icon_btn ${theme}`}
            // onClick={() => navigate("/search/page")}
          >
            <ThreeDotsVerticleIcon style={{fill:"var(--more-strong-text-color)",width:"5px"}} />
          </button>

          {/* Profile menu */}
          
        </div>
      </div>

      {openMenu && (
        <div className={`menu_component ${theme}`}>
          <MenuComp setOpenMenu={setOpenMenu} />
        </div>
      )}
    </>
  );
};

export default SocialHeader;