import axios from "axios";
import StripeCheckout from "react-stripe-checkout";

export default function Basket(props) {
  const { cartItems, onAdd, onRemove } = props;
  const itemsPrice = cartItems.reduce((a, c) => a + c.qty * c.price, 0);
  const taxPrice = itemsPrice * 0.14;
  const shippingPrice = itemsPrice > 25000 ? 0 : 1000;
  let totalPrice = itemsPrice + taxPrice + shippingPrice;
  const cartIds = [];
  for(const x of props.cartItems){
    cartIds.push(x.id);
 }
  const cartDetails = {
    orderNumber: Math.floor(Math.random() * 10000),
    productIds: cartIds,
    taxPrice: taxPrice,
    shippingPrice: shippingPrice,
    totalPrice: totalPrice,
    itemsPrice: itemsPrice,
  };

  const onToken = (token) => {
    console.log(token);
  };
  for (const iterator of cartItems) {
    cartIds.push(iterator.id);
  }
  // console.log(productIds)
  return (
    <aside className="block col-1">
      <h2>Cart Items</h2>
      <div>
        {cartItems.length === 0 && <div>Cart is Empty</div>}
        {cartItems.map((item) => (
          <div key={item.id} className="row">
            <div className="col-1">{item.name}</div>
            <div className="col-1">
              <button onClick={() => onRemove(item)} className="remove">
                -
              </button>
              <button onClick={() => onAdd(item)} className="add">
                +
              </button>
            </div>
            <div className="col-1 text-right">
              {item.qty} x Rs.{item.price.toFixed(2)}
            </div>
          </div>
        ))}
        {cartItems.length !== 0 && (
          <>
            <hr />
            <div className="row">
              <div className="col-2">Items Price</div>
              <div className="col-1 text-right">Rs.{itemsPrice.toFixed(2)}</div>
            </div>
            <div className="row">
              <div className="col-2">Tax Price</div>
              <div className="col-1 text-right">Rs.{taxPrice.toFixed(2)}</div>
            </div>
            <div className="row">
              <div className="col-2">Shipping Price</div>
              <div className="col-1 text-right">
                Rs.{shippingPrice.toFixed(2)}
              </div>
            </div>
            <div className="row">
              <div className="col-2">
                <strong>Total Price</strong>
              </div>
              <div className="col-1 text-right">
                <strong>Rs.{totalPrice.toFixed(2)}</strong>
              </div>
            </div>
            <hr />
            <br />
            <br />
            <div
              className="row"
              onClick={() => {
                document.getElementById("hiddenSpan").style.display =
                "inline-block";
                document.getElementById("cancelButtonId").style.display =
                "inline-block";
                axios
                  .post("http://localhost:9090/api/v1/addOrderDetails", cartDetails)
                  .then((response) => {
                    if (response.data != null) {
                      // alert("post is successfull");
                    }
                  });
              }}
            >
              <StripeCheckout
                token={onToken}
                stripeKey="pk_test_51Lac1RSGTXmhdtInMHzrGF4PFAcbIITNkOdvRaWd9VRw10YSLEXcCinQ1BaVP5LwCyoc4nX7xlPEYCQe9wgCbkEW00dMKKiC4u"
                name="Simple Shopping Cart"
                currency="INR"
                amount={totalPrice + "00"}
              />
              <br />
              <span id="hiddenSpan">
                Order {cartDetails.orderNumber} is placed successfully
              </span>
            </div>
            <br />
            <button id = "cancelButtonId" onClick={() => {
                 let newValetAmt = (parseInt(localStorage.getItem("valetAmount")) + itemsPrice)
                 localStorage.setItem("valetAmount",newValetAmt)
                 document.getElementById("hiddenSpan").style.display =
                 "none";
                 const newValetAmount = {
                  newValetAmt:newValetAmt
                 }
                axios
                  .put('http://localhost:9090/api/v1/updateValetAmount',newValetAmount)
                  .then((response) => {
                    if (response.data != null) {
                      // alert("post is successfull");
                    }
                  });
                  document.getElementById("hiddenSpanForCancel").style.display =
                  "inline-block";
              }}>Cancel Order</button>
               <span  id="hiddenSpanForCancel">
                Order is cancelled and the amount of Rs. {itemsPrice} is successfully added in your valet
              </span>
          </>
        )}
      </div>
    </aside>
  );
}
