PozoStore/src/Components/PozoPublicNavbar/PozoPubliNavbar.jsx

import { MdOutlineWatchLater } from "react-icons/md";
import { FiSearch } from "react-icons/fi";
import { IoIosArrowDown, IoMdClose } from "react-icons/io";
import { MdOutlineMyLocation } from "react-icons/md";
import { AiOutlineClose } from "react-icons/ai";
import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";

import pozologo from "../../Images/PozoStore.svg";
import { HiLocationMarker } from "react-icons/hi";
import {
  PiShoppingCartLight,
  PiStorefrontLight,
  PiUserCircleLight,
} from "react-icons/pi";
import { FaChevronDown } from "react-icons/fa6";
import { GoHeart } from "react-icons/go";
import { RxHamburgerMenu } from "react-icons/rx";
import "../../Styles/HomePage/PozoPublicNavbar.scss";

import PozoPublicSearch from "./PozoPublicSearch/PozoPublicSearch";
import { CiViewList } from "react-icons/ci";
import FullPageLoader from "../Loader/PozoPublicLoader";
import samplepic from "../../Images/Restaurant.png";
import { LuChevronDownCircle, LuChevronUpCircle } from "react-icons/lu";
import { breadCrumbSelector, changeBreadCrumb } from "../../Features/LandingPage/landingPage";
const subDirectory = import.meta.env.BASE_URL;

const PozoPublicNavbar = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [Searchquery, setSearchquery] = useState('');
  const breadCrumb = useSelector(breadCrumbSelector);
  const dropdownRef = useRef(null);
  const ref = useRef(null);
  const PageName = breadCrumb?.[breadCrumb.length - 1]?.name
  const [profile, setProfile] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [isCollapsedbook, setIsCollapsedbook] = useState(true);
  const [sidedrawer, setSidedrawer] = useState(true);
  const [locationDropdown, setLocationDropdown] = useState(false);
  const [dropdownClosing, setDropdownClosing] = useState(false);
  const [showLocationList, setShowLocationList] = useState(false);
  const [Locationdata, setLocationdata] = useState([]);
  const [currentLocation, setCurrentLocation] = useState(
    localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth..."
  );

  const selectLocation = (locName) => {
    if (locName) {
      setCurrentLocation(locName);
      localStorage.setItem("currentLocation", locName);
    }
    toggleLocationDropdown();
  };

  const handleTrackCurrentLocation = () => {
    if (navigator.geolocation) {
      setCurrentLocation("Detecting location...");
      navigator.geolocation.getCurrentPosition(
        async (position) => {
          const { latitude, longitude } = position.coords;
          try {
            const res = await fetch(
              `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`
            );
            const data = await res.json();
            if (data && data.display_name) {
              const address = data.display_name;
              setCurrentLocation(address);
              localStorage.setItem("currentLocation", address);
            } else {
              const fallback = `${latitude.toFixed(4)}, ${longitude.toFixed(4)}`;
              setCurrentLocation(fallback);
              localStorage.setItem("currentLocation", fallback);
            }
          } catch (err) {
            console.error("Reverse geocoding error:", err);
            const fallback = `Lat: ${latitude.toFixed(2)}, Lon: ${longitude.toFixed(2)}`;
            setCurrentLocation(fallback);
            localStorage.setItem("currentLocation", fallback);
          }
          if (locationDropdown) {
            toggleLocationDropdown();
          }
        },
        (error) => {
          console.error("Geolocation error:", error);
          alert("Location permission denied. Please allow location access in your browser.");
          setCurrentLocation(localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth...");
        }
      );
    } else {
      alert("Geolocation is not supported by your browser.");
    }
  };

  const GotoHomepage = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const toSignIn = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/signin`);
    }, 500);
  }

  const toMyProfile = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "My Profile",
        link: `${subDirectory}app-page/myprofile`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/myprofile`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const toFavOrder = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "My Orders",
        link: `${subDirectory}app-page/order`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/order`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const toFavShop = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "Fav Shop",
        link: `${subDirectory}app-page/favshop`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/favshop`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const toFavList = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "Favourite List",
        link: `${subDirectory}app-page/favlist`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/favlist`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const toStore = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "Stores",
        link: `${subDirectory}app-page/Stores`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/Stores`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  const navigatetoCart = () => {
    const items = [
      {
        name: "Home",
        link: `${subDirectory}app-page`,
      },
      {
        name: "Cart",
        link: `${subDirectory}app-page/cart`,
      },
    ];
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      navigate(`${subDirectory}app-page/cart`);
      dispatch(changeBreadCrumb({ items: items }));
    }, 500);
  };

  useEffect(() => {
    if (Searchquery.length > 0) {
      setShowLocationList(true)
    }
    else if (Searchquery.length == 0) {
      setShowLocationList(false)
    }
  }, [Searchquery])

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setProfile(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const handleLoginClick = () => {
    setProfile(!profile);
  };

  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
  };

  const toggleCollapsebook = () => {
    setIsCollapsedbook(!isCollapsedbook);
  };

  const toggleHamburger = () => {
    setSidedrawer(!sidedrawer);
  };

  const handleInputClick = () => {
    setShowLocationList((prevShowLocationList) => !prevShowLocationList);
  };

  const handleSubmitLocation = (e) => {
    e.preventDefault();

    if (!Searchquery.trim()) return;

    let items = JSON.parse(localStorage.getItem('Locationdata')) || [];

    const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase());

    if (!isDuplicate) {
      items.push({ ShopLocation: Searchquery.trim() });
      localStorage.setItem('Locationdata', JSON.stringify(items));
    }

    setLocationdata(items);
    setSearchquery('');
    setShowLocationList(false);
  };

  useEffect(() => {
    let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
    setLocationdata(items);
  }, []);

  const deleteRecentSearch = (locationToDelete) => {
    let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
    const updatedItems = items.filter(item => item.ShopLocation !== locationToDelete);
    localStorage.setItem('Locationdata', JSON.stringify(updatedItems));
    setLocationdata(updatedItems);
  };

  const handleChange = (e) => {
    setSearchquery(e.target.value);
  };

  const toggleLocationDropdown = () => {
    if (locationDropdown) {
      setDropdownClosing(true);
      setTimeout(() => {
        setLocationDropdown(false);
        setDropdownClosing(false);
      }, 300);
    } else {
      setLocationDropdown(true);
    }
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setDropdownClosing(true);
        setTimeout(() => {
          setLocationDropdown(false);
          setDropdownClosing(false);
        }, 300);
      }
    };

    if (locationDropdown) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [locationDropdown]);

  const handlerSearchFuntion = () => {
    if (!Searchquery.trim()) return;

    let items = JSON.parse(localStorage.getItem('Locationdata')) || [];

    const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase());

    if (!isDuplicate) {
      items.push({ ShopLocation: Searchquery.trim() });
      localStorage.setItem('Locationdata', JSON.stringify(items));
    }

    setLocationdata(items);
    setSearchquery('');
    setShowLocationList(false);
  }

  const StoreLocation = [
    { ShopLocationName: "Pochampalli" },
    { ShopLocationName: "Hosur" },
    { ShopLocationName: "Mathur" },
    { ShopLocationName: "Dharmapuri" },
    { ShopLocationName: "Coimbatore" },
    { ShopLocationName: "Salem" },
    { ShopLocationName: "Chennai" },
    { ShopLocationName: "Namakkal" }
  ];

  const ShopLocationLists = [
    { location: "Hosur" },
    { location: "Pochampalli" },
    { location: "Mathur" },
    { location: "Dharmapuri" },
    { location: "Coimbatore" },
    { location: "Salem" },
    { location: "Chennai" },
    { location: "Namakkal" }
  ];

  const filteredData2 = Array.isArray(ShopLocationLists)
    ? ShopLocationLists?.filter((item) => item?.location?.toLowerCase()?.includes(Searchquery?.toLowerCase()))
    : [];

  return (
    <div>
      <div className="PozoPublicNavbarMaster">
        {loading && <FullPageLoader />}

        <div className="PozoPublicNavbar">
          <div
            style={{
              display: "flex",
              alignItems: "center",
              columnGap: "1.5rem",
              fontSize: "22px",
            }}
          >
            <RxHamburgerMenu
              className="hambicon"
              onClick={toggleHamburger}
              style={{ position: "relative" }}
            />
            <img src={pozologo} alt="pozologo" onClick={GotoHomepage} />
          </div>

          {/* Collapse Menu code area */}
          {!sidedrawer && (
            <div className="CollapseMenu">
              {/* Header */}
              <div className="CollapseMenu-header">
                <div className="CollapseMenu-user">
                  <PiUserCircleLight size={38} />
                  <div>
                    <div className="CollapseMenu-username">Hello, Guest</div>
                    <div className="CollapseMenu-subtext">Sign in to your account</div>
                  </div>
                </div>
                <div className="CollapseMenu-close" onClick={toggleHamburger}>
                  <AiOutlineClose size={14} />
                </div>
              </div>

              <div className="CollapseMenu-divider" />

              <div className="collapse-button" onClick={toggleCollapse}>
                Categories
                {isCollapsed ? <LuChevronUpCircle style={{ strokeWidth: "1.5" }} /> : <LuChevronDownCircle style={{ strokeWidth: "1.5" }} />}
              </div>
              <div className={`collapse ${isCollapsed ? "collapsed" : "expanded"}`}>
                <div className="sidedrawer-content">
                  {["Restaurant", "Electrical, Electronic & Computers", "Bakery", "Groceries", "Lifestyle & Fashion", "Medicines & Pharma equips", "Dairy Delights"].map((cat, idx) => (
                    <div className="sidedrawer-direct" key={idx}>
                      <img src={samplepic} alt={cat} />
                      <p>{cat}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="CollapseMenu-divider" />

              {/* Booking */}
              <div className="collapse-button" onClick={toggleCollapsebook}>
                Booking
                {isCollapsedbook ? <LuChevronUpCircle style={{ strokeWidth: "1.5" }} /> : <LuChevronDownCircle style={{ strokeWidth: "1.5" }} />}
              </div>
              <div className={`collapse ${isCollapsedbook ? "collapsed" : "expanded"}`}>
                <div className="sidedrawer-content">
                  {["Restaurant", "Electrical, Electronic & Computers"].map((cat, idx) => (
                    <div className="sidedrawer-direct" key={idx}>
                      <img src={samplepic} alt={cat} />
                      <p>{cat}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="CollapseMenu-divider" />

              {/* Quick Links */}
              <div className="trackMyOrder" onClick={toStore}>Stores</div>
              <div className="trackMyOrder" onClick={toFavList}>Favourite List</div>
              <div className="trackMyOrder">Track My Order</div>

              <div className="CollapseMenu-divider" />

              {/* Login Button */}
              <div className="CollapseMenu-loginbtn" onClick={toSignIn}>Login / Sign Up</div>
            </div>
          )}

          {PageName != "checkout" && <div className="searchbar">
            <div>
              <div className="locatmark" onClick={toggleLocationDropdown}>
                <HiLocationMarker style={{ color: "#E33333", fontSize: "25px", flexShrink: 0 }} />
                <div className="location-text-group">
                  <div className="location-main-title">
                    Location <FaChevronDown style={{ fontSize: "10px", marginLeft: "4px", color: "#666" }} />
                  </div>
                  <div className="location-sub-text" title={currentLocation}>
                    {currentLocation}
                  </div>
                </div>
              </div>

              {locationDropdown && (
                <div
                  className={`location-dropdown ${dropdownClosing ? "closing" : ""}`}
                  ref={dropdownRef}>

                  <div className="locationSearch">
                    <p className="locationTitle"> Select Delivery location <span>
                      <IoMdClose onClick={toggleLocationDropdown} style={{
                        cursor: "pointer",
                        backgroundColor: "#f0f5ff",
                        height: "18px",
                        width: "18px"
                      }} />
                    </span></p>

                    {/* SEARCH INPUT FOR LOCATION  */}
                    <div className="serachMap">
                      <form style={{
                        width: "100%",
                        padding: "0px 5px",
                        borderRadius: "6px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        backgroundColor: "#F0F5FF",
                      }} className="search-bar" onSubmit={handleSubmitLocation}>
                        <FiSearch color="rgb(227,51,51)" />
                        <input
                          type="text"
                          value={Searchquery}
                          onChange={handleChange}
                          onClick={handleInputClick}
                          onKeyDown={(e) => {
                            if (e.key === "Enter")
                              handlerSearchFuntion();
                          }}
                          placeholder="Search Your Location..."
                        />
                      </form>

                    </div>

                    {/* location list in search bar  */}
                    {showLocationList && (
                      <div className="locationListDropDown">
                        {filteredData2.length > 0 ? filteredData2.map((item, idx) =>
                        (
                          <div className="locationList" key={idx} onClick={() => selectLocation(item?.location)}>
                            {item?.location}
                          </div>
                        ))
                          : <p>Location Not Found</p>}
                      </div>
                    )}


                    {/* DETECT CURRENT LOCATION  */}
                    <div className="DetectLocation" onClick={handleTrackCurrentLocation}>
                      <span>
                        <MdOutlineMyLocation size={15} /> Track Current Location
                      </span>
                      <div>Using ( GPS )</div>
                    </div>


                    {/* STORE LOCATION CODE AREA */}
                    <div className="StoreLocationHeader">
                      <p> # Store Location</p>
                      <span> <IoIosArrowDown size={16} /></span>
                    </div>


                    <div className="StoreLocationMain">
                      {StoreLocation.map((e, idx) => {
                        return (
                          <div className="ShopLocationName" key={idx} onClick={() => selectLocation(e?.ShopLocationName)}>
                            <span><HiLocationMarker size={15} color="rgb(227,51,51)" /></span>
                            <div>
                              {e?.ShopLocationName}
                            </div>
                          </div>
                        )
                      })}
                    </div>

                    {/* RECENT LOCATION CODE HERE  */}
                    <div className="RecentLocation">
                      <div style={{
                        backgroundColor: "#FFF", width: "100%",
                        position: "sticky", top: "0", padding: "5px 0px"
                      }}>
                        <p style={{
                          display: "flex",
                          alignItems: "center",
                          padding: "2px 5px ",
                          columnGap: "5px"
                        }}>
                          <MdOutlineWatchLater size={14} /> Recent Search</p>
                      </div>
                      {(Locationdata?.map((e, idx) => (
                        <div className="RecentLocation-Area" key={idx} onClick={() => selectLocation(e?.ShopLocation)}>
                          <div>
                            <p style={{
                              borderRadius: "4px", padding: "2px 10px",
                              backgroundColor: "rgb(255, 240, 240)",
                              color: "rgb(227,51,51)"
                            }}>
                              {e?.ShopLocation}
                              <span
                                onClick={(event) => {
                                  event.stopPropagation();
                                  deleteRecentSearch(e?.ShopLocation);
                                }}> ⨉</span></p>
                          </div>
                        </div>
                      )))}

                    </div>

                  </div>

                </div>
              )}
            </div>
            <div style={{ color: "#616161" }}> | </div>
            <div>
              <PozoPublicSearch />
            </div>
          </div>}

          <div className="NavIcons">
            <div className="formob">
              <div className="cart" onClick={navigatetoCart}>
                <PiShoppingCartLight
                  className="carticon"
                  style={{
                    fontSize: "26px",
                    fontWeight: "200",
                    strokeWidth: "2",
                  }}
                />
              </div>

              <div
                ref={ref}
                className="login-container"
                onClick={handleLoginClick}
              >
                <div className="login">
                  <div className="login-btn" onMouseEnter={() => { setProfile(true) }}>
                    Login
                    <FaChevronDown
                      style={{
                        fontSize: "13px",
                        fontWeight: "100",
                        strokeWidth: "2",
                      }}
                    />
                  </div>

                  {profile && (
                    <div
                      className={`profile-details ${profile ? "open" : "closed"
                        }`}
                    >
                      <div className="profile-content">
                        <div className="profile-header">
                          <span className="new-cust-text">New customer?</span>
                          <span className="signup-link" onClick={toSignIn}>Sign Up</span>
                        </div>
                        <div className="profile-list">
                          <div className="profile-items" onClick={toMyProfile}>
                            <PiUserCircleLight className="profile-item-icon" />
                            <span>My Profile</span>
                          </div>
                          <div className="profile-items" onClick={toFavOrder}>
                            <CiViewList className="profile-item-icon" />
                            <span>My Orders</span>
                          </div>
                          <div className="profile-items" onClick={toFavShop}>
                            <PiStorefrontLight className="profile-item-icon" />
                            <span>Fav Shop</span>
                          </div>
                          <div className="profile-items" onClick={toFavList}>
                            <GoHeart className="profile-item-icon" />
                            <span>Fav List</span>
                          </div>
                          <div className="profile-items" onClick={toStore}>
                            <PiStorefrontLight className="profile-item-icon" />
                            <span>Stores</span>
                          </div>
                        </div>
                        <div className="loginout-btn" onClick={toSignIn}> Sign In / Login </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PozoPublicNavbar;