/* eslint-disable react/prop-types */
import { useContext, useState } from "react";
import { CartContext } from "../cartContext";
import { crossIcon, crossSecond } from "../../assets/SvgIcons/svgIcons";

export default function Cart({ showModal, toggle }) {
  const {
    cartItems,
    addToCart,
    removeFromCart,
    removeItem,
    clearCart,
    getCartTotal,
  } = useContext(CartContext);

  const [checkout, setCheckout] = useState("");

  const handleCheckOut = () => {
    setCheckout("Your Order has been checked out");
    setTimeout(() => {
      setCheckout("");
    }, 3000);
  };

  return (
    showModal && (
      <div className="fixed inset-0 left-1/4 bg-white dark:bg-slate-800 gap-8 p-10 text-black dark:text-white font-normal text-sm overflow-x-auto overflow-y-scroll no-scrollbar">
        <div className="flex flex-col gap-y-2 items-start">
          <h1 className="text-lg font-bold">Total: ${getCartTotal()}</h1>
          <button
            className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none"
            onClick={handleCheckOut}
          >
            Checkout
          </button>
          <div className="flex items-center justify-center w-full">
            {cartItems?.length > 0 ? (
              <div className="flex flex-col justify-between items-center">
                {checkout && (
                  <p className="mt-4 text-green-500 font-bold">{checkout}</p>
                )}
              </div>
            ) : (
              <h1 className="text-lg font-bold">Your cart is empty</h1>
            )}
          </div>
          <h1 className="flex text-4xl font-bold items-center justify-center w-full h-full">
            Cart Details
          </h1>

          <div className="flex flex-col absolute right-5 top-0 gap-y-20">
            <div className="ml-5 top-5">
              <button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
                {crossIcon}
              </button>
            </div>
            <div className="mr-6">
              <button
                className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
                onClick={() => {
                  clearCart();
                }}
              >
                Clear cart
              </button>
            </div>
          </div>
          <div className="flex flex-col items-start gap-4 w-full mt-8">
            {cartItems?.map((item) => (
              <div
                className="flex justify-between items-start rounded-lg border border-white p-4 min-w-full"
                key={item?.id}
              >
                <div className="flex gap-4">
                  <img
                    src={item?.image}
                    alt={item?.title}
                    className="rounded-md h-24 w-24"
                  />
                  <div className="flex flex-col w-96">
                    <h1 className="text-lg font-bold w-full">{item?.title}</h1>
                    <p className="text-slate-300">${item?.price}</p>
                  </div>
                </div>
                <div className="flex gap-4 items-center ml-8">
                  <button
                    className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
                    onClick={() => {
                      removeFromCart(item);
                    }}
                  >
                    -
                  </button>
                  <p>{item?.quantity}</p>
                  <button
                    className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
                    onClick={() => {
                      addToCart(item);
                    }}
                  >
                    +
                  </button>

                  <button
                    className="px-3 py-1 text-red-600"
                    onClick={() => {
                      removeItem(item);
                    }}
                  >
                    {crossSecond}
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  );
}