Componente Button añadir a Cart en LocalStorage con Next.js y React

"use client";
import { Product } from "@/app/page";
import Link from "next/link";
import { ChangeEvent, useEffect, useState } from "react";

export const ButtonAddToCart = ({ post }: { post: Product }) => {
  const [isCart, setToCart] = useState(false);
  const [quantity, setQuantity] = useState(1);

  useEffect(() => {
    setToCart(existInCart(post.id));
  }, [post.id]);

  const addToCart = (productId: number, quantityToAdd: number) => {
    // Obtener el carrito actual o usar un array vacío si no hay nada en localStorage
    let cart = JSON.parse(localStorage.getItem("Cart") || "[]");

    // Buscar si el producto ya está en el carrito
    const existingProduct = cart.find((item: Product) => item.id === productId);

    if (existingProduct) {
      // Si el producto ya está en el carrito, incrementa la cantidad pero no más allá del límite de stock
      const potentialNewQuantity = existingProduct.quantity + quantityToAdd;

      if (potentialNewQuantity > post.stock) {
        alert("No puedes añadir más de este producto. Stock insuficiente.");
        existingProduct.quantity = post.stock; // establecido en stock máximo disponible
      } else {
        existingProduct.quantity = potentialNewQuantity;
      }
    } else {
      // Si el producto no está en el carrito y la cantidad a añadir no excede el stock
      if (quantityToAdd <= post.stock) {
        // cart.push({
        //   id: productId,
        //   quantity: quantityToAdd,
        // });

        post.quantity = quantityToAdd; // Añadir la propiedad 'quantity' al objeto 'post'
        cart.push(post); // Añadir el objeto 'post' al carrito

        setToCart(true);
      } else {
        alert("No puedes añadir más de este producto. Stock insuficiente.");
      }
    }

    // Guardar el carrito actualizado en localStorage
    localStorage.setItem("Cart", JSON.stringify(cart));
  };

  const existInCart = (id: number): boolean => {
    const cart = JSON.parse(localStorage.getItem("Cart") || "[]");
    const existingProduct = cart.find((item: any) => item.id === id);
    return existingProduct;
  };

  const handleIncrement = () => {
    if (quantity < 10) {
      setQuantity(quantity + 1);
    }
  };

  const handleDecrement = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1);
    }
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(event.target.value, 10);
    if (value >= 1 && value <= 10) {
      setQuantity(value);
    }
  };

  return (
    <>
      <br />
      <br />
      <div className="text-center p-4">
        <button onClick={handleDecrement}>-</button>
        <input
          type="number"
          className="bg-black w-10 text-center"
          value={quantity}
          onChange={handleChange}
          min={1}
          max={10}
        />
        <button onClick={handleIncrement}>+</button>
      </div>

      <div className="text-center">
        stock: {post.stock} <br />
        <button
          className="p-4 bg-slate-500 rounded-2xl text-center"
          onClick={() => addToCart(post.id, quantity)}
        >
          Añadir a la cesta
        </button>
        <br />
        <br />
        {isCart && (
          <Link className="p-2 font-mono" href={"/cart"}>
            ir al carrito {"->"} 🛒
          </Link>
        )}
      </div>
    </>
  );
};