"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 = (props) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;
  const [smallBasket, setSmallBasket] = useState(false);

  return (
    <div className="mr-2">
      <div
        className="bg-secondary-600 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
        onMouseEnter={() => setSmallBasket(true)}
        onClick={() => setSmallBasket(false)}
      >
        <p className="mb-0 text-white">سبد خرید</p>
      </div>

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

      {smallBasket && (
        <div
          className={`relative !z-[100] tr03 ${
            smallBasket ? "opacity-100" : "opacity-0"
          } `}
          onMouseEnter={() => setSmallBasket(true)}
          onMouseLeave={() => setSmallBasket(false)}
        >
          <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">
                  {" "}
                  ثبت خرید
                </button>
              </Link>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CartNavbar;