"use client";
import CardCart from "@comp/Cards/CardCart/page";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useState } from "react";

const CartNavbar = ({ isScrolled }) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;
  const [smallBasket, setSmallBasket] = useState(false);

  return (
    <div
      className={` ${
        isScrolled ? " fixed w-fit !z-[100] mt-[-40px] mr-[30px] " : "mr-2"
      }`}
    >
      <div
        className={`bg-secondary-600  rounded-xl text-sm flex cursor-pointer px-5 ${
          isScrolled ? "p-1" : "py-2"
        } `}
        onClick={() => setSmallBasket(!smallBasket)}
      >
        <p className="mb-0 text-white">سبد خرید</p>
      </div>

      <div className="flex justify-end">
        <div
          className={`absolute  mr-[3px] ${
            isScrolled ? "mt-[-40px]" : "mt-[-50px]"
          }`}
        >
          <div
            className={`bg-white border-[1px] rounded-full text-center ${
              isScrolled ? "w-[20px] h-[20px]" : "w-[25px] h-[25px] "
            }`}
          >
            <PersianNumber
              number={cart?.length}
              style={` ${
                isScrolled ? "!text-[10px] relative top-[-3px]" : "!text-sm"
              }`}
            />{" "}
          </div>
        </div>
      </div>

      {smallBasket && (
        <div
          className={`relative !z-[100] tr03 ${
            smallBasket ? "opacity-100" : "opacity-0"
          } `}
        >
          <div className="absolute w-[400px] bg-white border-[3px] border-gray-100  rounded-xl mt-2 max-h-[450px] overflow-auto  mr-[-310px]  scroll-1">
            <div className="text-center p-3">
              <p className="mb-0 text-sm  pb-3">
                <PersianNumber
                  number={cart?.length}
                  style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
                />
                محصول موجود در سبد
              </p>

              {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
              <div>
                {cart.map((e, index) => (
                  <CardCart key={index} data={e} />
                ))}
              </div>
            </div>

            <div className="w-full p-3 ">
              {/* <div className="">
                <p className="mb-0 text-sm p-3">
                  جمع کل :
                  <PersianNumber
                    number={2546385}
                    style="text-lg mr-2 font-bold text-gray-500"
                  />
                  <small className="mr-1 mt-[6px]">تومان</small>
                </p>
              </div> */}
              <Link href={"/cart"}>
                <button
                  className="btn btn-primary text-sm w-full py-3 rounded-3xl"
                  onClick={() => CTX.fetchOrderBagCheck()}
                >
                  {" "}
                  ثبت خرید
                </button>
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CartNavbar;