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

const AddToCart = ({ data }) => {
  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 (
    <>
      {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>
      )}
    </>
  );
};

export default AddToCart;