import React, { useState, useEffect } from "react";
import "./home.css";
import { PayPal, Purchase, ShowCase, Home } from ".";
import { AllProducts } from "../products";
import { Orders } from "../orders";
import { CartIcon } from '../cart';

// component
const Details = () => {
  const [cart, setCart] = useState([]);
  const [orderID, setOrderID] = useState(null);
  const [total, setTotal] = useState(0);
  const [invoice, setInvoice] = useState(null);

  // refresh the cart logo and amount of the cart
  useEffect(() => {

    let sub_total = cart.reduce((sum, it)=>{
      console.log(it.price);
      return it.price+sum
    },0);

    setTotal(sub_total);

    console.log("effect", total)
  },[cart, total]);

  return (
    <>
      <ShowCase />
      {/* you can try 600011 in orderID */}
      <Orders orderID={orderID} setOrderID={setOrderID} invoice={invoice} />
      <AllProducts setCart={setCart} />
      <CartIcon count={cart?.length} total={total}   />
      <Purchase />
      <PayPal cart={cart} setInvoice={setInvoice} />
    </>
  );
};

const Landing = () => {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <>
      {showDetails ? <Details /> : <Home goNext={() => setShowDetails(true)} />}
    </>
  );
};

export default Landing;
