import { useContext, useState } from "react";
import { CartContext } from "../context/CartContext";
import { pizzaCart } from "../pizzas";
import { UserContext } from "../context/UserContext";

const Cart = () => {
  const { token } = useContext(UserContext);
  const { cart, setCart } = useContext(CartContext);
  return (
    <>
      <h1 className="text-4xl font-bold">Carrito</h1>
      <div id="cartContainer" className="flex gap-4 flex-col">
        {cart.map((pizza) => (
          <div
            className="border-3 border-lime-300 rounded-md flex gap-4 overflow-hidden"
            key={pizza.id}
          >
            <img src={pizza.img} className="w-32 rounded-r-sm" />
            <div>
              <h2>Pizza {pizza.name}</h2>
              <div className="flex gap-4">
                <button
                  onClick={() => {
                    setCart((cart) =>
                      cart.map((p) => (p.id === pizza.id ? { ...p, count: p.count + 1 } : p)),
                    );
                  }}
                  className="bg-blue-500 px-4 text-white rounded-md"
                >
                  +
                </button>
                <p className="text-grey-500">{pizza.count}</p>
                <button
                  onClick={() => {
                    setCart((cart) =>
                      cart
                        .map((p) => (p.id === pizza.id ? { ...p, count: p.count - 1 } : p))
                        .filter((p) => p.count > 0),
                    );
                  }}
                  className="bg-red-500 px-4 text-white rounded-md"
                >
                  -
                </button>
              </div>
            </div>
          </div>
        ))}
        <p className="text-3xl">
          Total:
          <strong>
            {` $${cart.reduce((acc, it) => acc + it.price * it.count, 0).toLocaleString("es-CL")}`}
          </strong>
        </p>
      </div>
      <button
        type="submit"
        disabled={!token}
        className="bg-black text-white rounded-md p-2 text-lg hover:bg-gray-500 disabled:bg-gray-200"
      >
        Pagar
      </button>
    </>
  );
};

export default Cart;