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

export default function RootLayout({ children }) {
  const [cart, setCart] = useState([]);
  const [products, setProducts] = 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 [checkOutData, setCheckOutData] = useState([]);

  console.log(navData);

  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 (
    id,
    selectedBrands,
    isChecked,
    minPrice,
    maxPrice,
    sort,
    isRangePrice
  ) => {
    const brandIds = selectedBrands?.map((brand) => brand.id);

    const queryString = `page=0${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();
    setProducts(post);
  };

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

    fetchNavData();
  }, []);

  return (
    <AppContext.Provider
      value={{
        state: {
          cart,
          products,
          navData,
          loading,
          brands,
          closeNavbar,
          bottomSheetCartOpen,
          bottomSheetFilterOpen,
          bottomSheetDiscountOpen,
          checkOutData,
        },
        setCart,
        setProducts,
        setNavData,
        setLoading,
        setBrands,
        setBottomSheetCartOpen,
        setBottomSheetFilterOpen,
        setBottomSheetDiscountOpen,
        setCheckOutData,
        AddItemToCart,
        RemoveItemFromCart,
        fetchNavData,
        fetchProducts,
        setCloseNavbar,
      }}
    >
      <html lang="en">
        <body>
          {children}
          <ToastContainer position="bottom-right" closeOnClick={true} rtl />
          <Loading />
        </body>
      </html>
    </AppContext.Provider>
  );
}