web/src/app/layout.jsx

"use client";
import AppContext from "@ctx/AppContext";
import Chapar from "plugins/Chapar";
import Loading from "plugins/Loading/page";
import BottomSheetAddress from "plugins/bottomSheet/BottomSheetAddress";
import BottomSheetLogOut from "plugins/bottomSheet/BottomSheetLogOut";
import { useEffect, useState } from "react";
import "react-image-gallery/styles/css/image-gallery.css";
import "react-image-lightbox/style.css";
import "react-spring-bottom-sheet/dist/style.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "swiper/css";
import "../../style/fontiran.css";
import "../../style/globals.css";
import Goftino from "plugins/Goftino/page";

export const metadata = {
  title: "Acme",
  openGraph: {
    title: "Acme",
    description: "Acme is a...",
  },
};

export default function RootLayout({ children }) {
  const [cart, setCart] = useState([]);
  const [products, setProducts] = useState([]);
  const [pager, setPager] = useState([]);
  const [navData, setNavData] = useState([]);
  const [brands, setBrands] = useState([]);
  const [loading, setLoading] = useState(false);
  const [closeNavbar, setCloseNavbar] = useState(false);
  const [bottomSheetCartOpen, setBottomSheetCartOpen] = useState(false);
  const [bottomSheetFilterOpen, setBottomSheetFilterOpen] = useState(false);
  const [bottomSheetDiscountOpen, setBottomSheetDiscountOpen] = useState(false);
  const [bottomSheetAddressOpen, setBottomSheetAddressOpen] = useState(false);
  const [bottomSheetLogOutOpen, setBottomSheetLogOutOpen] = useState(false);
  const [bottomSheetDeleteAddressOpen, setBottomSheetDeleteAddressOpen] =
    useState(false);
  const [checkOutData, setCheckOutData] = useState([]);
  const [addressData, setAddressData] = useState([]);
  const [profile, setProfile] = useState([]);
  const [stopProducts, setStopProducts] = useState(false);
  const [pageGetProducts, setPageGetProducts] = useState(0);
  const [isMobile, setIsMobile] = useState(false);
  const [isOpenLightBox, setIsOpenLightBox] = useState(false);

  const AddItemToCart = (
    id,
    persianName,
    cost,
    costWithDiscount,
    mainImage,
    hasDiscount,
    maxOrderCount
  ) => {
    setCart((prevCart) => {
      // Check if the item is already in the cart
      const existingItem = prevCart.find((item) => item.id === id);
      let updatedCart;
      if (existingItem) {
        // If the item is already in the cart, update its count
        if (existingItem.count < maxOrderCount) {
          updatedCart = prevCart.map((item) =>
            item.id === id ? { ...item, count: item.count + 1 } : item
          );
        } else {
          // Notify user if maxOrderCount is exceeded
          toast.error(
            ` 
          نمیتوانید بیشتراز 
          
          ${maxOrderCount} 
          
          عدد ثبت کنید  `,
            {
              position: "bottom-right",
              closeOnClick: true,
            }
          );
          updatedCart = prevCart;
        }
      } else {
        // If the item is not in the cart, add it with a count of 1
        updatedCart = [
          ...prevCart,
          {
            id,
            count: 1,
            persianName,
            cost,
            costWithDiscount,
            mainImage,
            hasDiscount,
            maxOrderCount,
          },
        ];
      }
      // Store the updated cart in local storage
      localStorage.setItem("cart", JSON.stringify(updatedCart));

      // Return the updated cart
      return updatedCart;
    });
  };

  const RemoveItemFromCart = (id) => {
    setCart((prevCart) => {
      // Check if the item is already in the cart
      const existingItem = prevCart.find((item) => item.id === id);

      if (existingItem) {
        // If the item is already in the cart
        if (existingItem.count === 1) {
          // If the item count is 1, remove it from the cart
          const updatedCart = prevCart.filter((item) => item.id !== id);

          // Store the updated cart in local storage
          localStorage.setItem("cart", JSON.stringify(updatedCart));

          // Return the updated cart
          return updatedCart;
        } else {
          // If the item count is greater than 1, update its count
          const updatedCart = prevCart.map((item) =>
            item.id === id ? { ...item, count: item.count - 1 } : item
          );

          // Store the updated cart in local storage
          localStorage.setItem("cart", JSON.stringify(updatedCart));

          // Return the updated cart
          return updatedCart;
        }
      } else {
        // If the item is not in the cart, do nothing
        return prevCart;
      }
    });
  };

  const fetchNavData = async (id) => {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/product/category?sortByMain=true`
    );
    const post = await res.json();
    setNavData(post);
  };

  const fetchProducts = async (
    pageGetProducts,
    id,
    selectedBrands,
    isChecked,
    minPrice,
    maxPrice,
    sort,
    isRangePrice,
    paginationSay
  ) => {
    const brandIds = selectedBrands?.map((brand) => brand.id);

    const queryString = `${`page=${pageGetProducts}`}${
      id ? `&categoryId=${id}` : ""
    }${
      brandIds?.length > 0 ? `&brandIds=${brandIds?.join("&brandIds=")}` : ""
    }${isChecked ? `&isActive=${isChecked}` : ""}${
      isRangePrice ? `&minPrice=${minPrice}` : ""
    }${isRangePrice ? `&maxPrice=${maxPrice}` : ""}${
      !!sort ? `&sortBy=${sort}` : ""
    }`;

    const cleanQueryString = decodeURIComponent(
      queryString.replace(/\%20/g, " ")
    );
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/product?${cleanQueryString}`
    );
    const post = await res.json();
    if (paginationSay) {
      // If it's a paginated request (not the first Page)
      window.scrollTo({
        top: 0,
        behavior: "smooth", // Optional: smooth scrolling behavior
      });
      console.log();
      setProducts(post.products);
      setStopProducts(true); // Assuming this stops pagination
    }

    if (post.length <= 19) {
      // If the length of fetched products is less than or equal to 19, indicating the last Page
      setStopProducts(true); // Assuming this stops pagination
    }

    if (!paginationSay && pageGetProducts == 0) {
      // If it's not a paginated request and it's the first Page
      setProducts(post.products);
      setPager(post.pager);
    } else if (!paginationSay && pageGetProducts != 0) {
      // If it's not a paginated request and it's not the first Page
      console.log("kir", products, !!products ? products : [], post.products);
      setProducts((data) => [...(data ? data : []), ...post.products]);
    }
  };

  const fetchAddressUser = async () => {
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/user/address`,
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );

      setAddressData(data);
    } catch ({ error, status }) {
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };

  const fetchUserInfo = async () => {
    try {
      const data = await Chapar.get(
        `${process.env.NEXT_PUBLIC_API_URL}/user/info`,
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );

      setProfile(data);
    } catch ({ error, status }) {
      localStorage.removeItem("token");
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  useEffect(() => {
    const storedCart = localStorage.getItem("cart");
    const token = localStorage.getItem("token");
    if (storedCart) {
      setCart(JSON.parse(storedCart));
    }

    if (token) {
      fetchUserInfo();
    }

    fetchNavData();
  }, []);

  useEffect(() => {
    const mediaQuery = window.matchMedia("(max-width: 768px)"); // Adjust the width according to your mobile breakpoint

    const checkDeviceType = (mediaQuery) => {
      if (mediaQuery.matches) {
        setIsMobile(true);
      } else {
        setIsMobile(false);
      }
    };

    // Initial check
    checkDeviceType(mediaQuery);

    // Listen for changes in media query
    const listener = () => checkDeviceType(mediaQuery);
    mediaQuery.addEventListener("change", listener);

    // Clean up
    return () => {
      mediaQuery.removeEventListener("change", listener);
    };
  }, []);

  return (
    <AppContext.Provider
      value={{
        state: {
          cart,
          products,
          navData,
          loading,
          brands,
          closeNavbar,
          bottomSheetCartOpen,
          bottomSheetFilterOpen,
          bottomSheetDiscountOpen,
          bottomSheetAddressOpen,
          bottomSheetDeleteAddressOpen,
          bottomSheetLogOutOpen,
          checkOutData,
          addressData,
          profile,
          stopProducts,
          pageGetProducts,
          pager,
          isMobile,
          isOpenLightBox,
        },
        setCart,
        setProducts,
        setNavData,
        setLoading,
        setBrands,
        setBottomSheetCartOpen,
        setBottomSheetFilterOpen,
        setBottomSheetDiscountOpen,
        setBottomSheetAddressOpen,
        setBottomSheetDeleteAddressOpen,
        setBottomSheetLogOutOpen,
        setCheckOutData,
        setStopProducts,
        setProfile,
        setPageGetProducts,
        setPager,
        setIsMobile,
        setIsOpenLightBox,
        AddItemToCart,
        RemoveItemFromCart,
        fetchNavData,
        fetchProducts,
        setCloseNavbar,
        setAddressData,
        fetchAddressUser,
      }}
    >
      <html lang="en">
        <body>
          {children}
          <ToastContainer position="bottom-right" closeOnClick={true} rtl />
          <Loading />
          <BottomSheetAddress />
          <BottomSheetLogOut />

          <Goftino />
        </body>
      </html>
    </AppContext.Provider>
  );
}