web/components/AppsComponent/CartData/page.jsx

"use client";
import CardCart from "@comp/Cards/CardCart/page";
import CardNormal from "@comp/Cards/CardNormal/page";
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
import Navbar from "@comp/Navbar/page";
import AppContext from "@ctx/AppContext";
import { useRouter } from "next/navigation";
import Chapar from "plugins/Chapar";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useEffect } from "react";
import { toast } from "react-toastify";
import { Swiper, SwiperSlide } from "swiper/react";

const CartData = ({ data }) => {
  const CTX = useContext(AppContext);
  const router = useRouter();
  const cart = CTX.state.cart;

  const calculateTotalCost = cart.reduce(
    (total, item) => total + parseInt(item.cost) * item.count,
    0
  );

  const calculateTotalCostWithDiscount = cart.reduce(
    (total, item) => total + parseInt(item.costWithDiscount) * item.count,
    0
  );

  const handleGoCheckOut = async () => {
    CTX.GoCheckOut();
  };

  useEffect(() => {
    CTX.setBottomSheetCartOpen(false);
  }, []);
  return (
    <>
      <div className=" pb-20">
        <Navbar theme={1} />

        <div className="xs:w-full lg:w-4/12 mx-auto">
          <div className="text-right flex rtl justify-between  p-2 mt-2   ">
            <p className="mb-0 text-sm font-semibold py-4">
              محصولات انتخاب شده
            </p>

            <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
              <p className="mb-0 text-[11px] text-white rtl">
                <PersianNumber number={cart?.length} style={"mx-1"} />
                محصول
              </p>
            </div>
          </div>

          <div className="">
            {cart?.map((e, index) => (
              <CardCart key={index} data={e} />
            ))}

            <div className="my-5">
              <div className="text-right px-4">
                {" "}
                <p className="mb-0 text-sm py-4">
                  سبد خریدتو کامل کن{" "}
                  <strong className="text-red-600">(فقط امروز)</strong>
                </p>
              </div>

              <Swiper
                spaceBetween={50}
                slidesPerView={6.2}
                // onSlideChange={() => console.log("slide change")}
                className="rtl relative"
                // dir="rtl"
                breakpoints={{
                  320: {
                    slidesPerView: 1.8,
                  },
                  480: {
                    slidesPerView: 2.1,
                  },
                  768: {
                    slidesPerView: 2.2,
                  },
                  1024: {
                    slidesPerView: 3.3,
                  },
                  1440: {
                    slidesPerView: 2.8,
                  },
                }}
              >
                {data?.map((e, index) => (
                  <SwiperSlide key={index}>
                    <CardNormal data={e} priority />
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>

            {/* <p className="mb-0 text-[12px] text-right text-gray-500">
              برای رسیدن به الماس باید
              <strong> پنح خرید دیگر </strong>
              انجام دهید
            </p>
            <div className="w-3/12 bg-green-600 p-2 rounded-full mt-2 ml-auto text-center"></div> */}

            <div className="">
              <div className="text-right flex rtl justify-between border-b-[1px] border-gray-200 my-3 px-4 ">
                <p className="mb-0 text-sm font-medium py-4">حساب نهایی</p>

                {/* <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
            <p className="mb-0 text-[11px] text-white rtl">
              <PersianNumber number={cart?.length} style={"mx-1"} />
              محصول
            </p>
          </div> */}
              </div>

              <div>
                <div className="flex justify-between rtl px-4">
                  <p className="mb-0 text-[12px] text-gray-500">قیمت </p>

                  <div className="flex justify-center">
                    <p className="mb-0 ">
                      <PersianNumber
                        number={(calculateTotalCost / 10)?.toLocaleString()}
                        style={"!text-[14px] !font-medium"}
                      />
                    </p>
                    <small className="text-gray-500 text-[12px] mt-1 mx-1">
                      {" "}
                      تومان
                    </small>
                  </div>
                </div>

                <div className="flex justify-between rtl my-2 px-4">
                  <p className="mb-0 text-[12px] text-gray-500">تخفیف محصول</p>

                  <div className="flex justify-center ">
                    <p className="mb-0 ">
                      <PersianNumber
                        number={(
                          (calculateTotalCost -
                            calculateTotalCostWithDiscount) /
                          10
                        )?.toLocaleString()}
                        style={"!text-[14px] !font-medium"}
                      />
                    </p>
                    <small className="text-gray-500 text-[12px] mt-1 mx-1">
                      {" "}
                      تومان
                    </small>
                  </div>
                </div>

                <div className="flex justify-between bg-primary-100 p-3 rtl my-2">
                  <p className="mb-0 text-sm text-primary-600 font-bold">
                    قابل پرداخت
                  </p>

                  <div className="flex justify-center">
                    <p className="mb-0 ">
                      <PersianNumber
                        number={
                          calculateTotalCostWithDiscount !== 0
                            ? (
                                calculateTotalCostWithDiscount / 10
                              )?.toLocaleString()
                            : 0
                        }
                        style={"!text-[14px] !font-medium text-primary-800"}
                      />
                    </p>
                    <small className="text-gray-500 text-[12px] mt-1 mx-1">
                      {" "}
                      تومان
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <NavBarDownCart
          calculateTotalCost={calculateTotalCostWithDiscount / 10}
          event={() => handleGoCheckOut()}
          permissionGoPay={!!cart.length > 0}
        />
      </div>
    </>
  );
};

export default CartData;