"use client";
import AppContext from "@ctx/AppContext";
import PersianNumber from "plugins/PersianNumber";
import { useContext } from "react";

const AddToCart = ({ data, theme }) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;

  const handleAddItemToCart = (id) => {
    CTX.AddItemToCart(
      data?.id,
      data?.persianName,
      data?.cost,
      data?.costWithDiscount,
      data?.mainImage,
      data?.hasDiscount,
      data?.maxOrderCount
    );
  };
  return (
    <>
      {theme == 1 && (
        <>
          {" "}
          {data?.stock == 0 ? (
            <div className="bg-gray-200 w-full h-fit p-2 rounded-xl">
              <p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
            </div>
          ) : (
            <div className="flex">
              {!cart.find((item) => item.id === data?.id) ? (
                <div className="w-[25px] h-[25px] bg-gray-100 overflow-hidden rounded-lg text-center p-1  m-1 cursor-pointer">
                  <div onClick={() => handleAddItemToCart()}>
                    <p className="mb-0  text-[25px] mt-[-10px]">+</p>
                  </div>
                </div>
              ) : (
                <div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
                  <div
                    className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
                    onClick={() => handleAddItemToCart()}
                  >
                    <p className="mb-0  text-[20px] mt-[-2px]">+</p>
                  </div>
                  <p className="mb-0 mx-2 mt-1  text-sm ">
                    <PersianNumber
                      number={cart.find((item) => item.id === data?.id).count}
                    />
                  </p>
                  <div
                    className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
                    onClick={() => CTX.RemoveItemFromCart(data?.id)}
                  >
                    <p className="mb-0  text-[20px] mt-[-2px]">-</p>
                  </div>
                </div>
              )}
            </div>
          )}
        </>
      )}

      {theme == 2 && (
        <>
          {" "}
          {data?.stock == 0 ? (
            <div className="bg-gray-200 w-fit px-5 h-fit p-2 rounded-xl">
              <p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
            </div>
          ) : (
            <div className="flex">
              {!cart.find((item) => item.id === data?.id) ? (
                <div className=" bg-primary-500 overflow-hidden rounded-lg text-center p-1 px-5  cursor-pointer">
                  <div onClick={() => handleAddItemToCart()}>
                    <p className="mb-0  text-sm text-white xs:mt-[6px] lg:mt-[2px]">
                      افزودن به سبد
                    </p>
                  </div>
                </div>
              ) : (
                <div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
                  <div
                    className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
                    onClick={() => handleAddItemToCart()}
                  >
                    <p className="mb-0  text-[20px] mt-[-2px]">+</p>
                  </div>
                  <p className="mb-0 mx-2 mt-1  text-sm ">
                    <PersianNumber
                      number={cart.find((item) => item.id === data?.id).count}
                    />
                  </p>
                  <div
                    className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
                    onClick={() => CTX.RemoveItemFromCart(data?.id)}
                  >
                    <p className="mb-0  text-[20px] mt-[-2px]">-</p>
                  </div>
                </div>
              )}
            </div>
          )}
        </>
      )}
    </>
  );
};

export default AddToCart;