import React, { useState, useEffect, useContext } from 'react'
import './App.css'
import axios from 'axios';
import { CartContext } from './CartContext';
import Cart from './Cart';
import CartNoContext from './CartNoContext';


const App = () => {
  const [count, setCount] = useState(0)

  // const [color, setColor] = useState("red");
  const [text, texty] = useState("My favorite color is red!");

  const [callApi, setCallApi] = useState(false);

  // useEffect(
  //     () => {}
  //     ,
  //     []
  // )

  useEffect(
    () => {
      if (callApi === true) {
        axios.get('https://jsonplaceholder.typicode.com/posts/1')
          .then((response) => {
            console.log(JSON.stringify(response))
          })
          .catch((error) => { console.error(error) })
      } else {
        console.log("API is not called")
      }
    }
    ,
    // [] // when left empty, it executes the call back function inside the useEffect WHEN THE PAGE LOADS
    [callApi]
  )

  const { cart, removeFromCart } = useContext(CartContext);

  // console.log(`cart count ${cart.length}`)

  // cart.map((price, cakeName) => {
  //   console.log(`${JSON.stringify(price)} ${cakeName}`)
  // })

  return (
    <>
      <button onClick={() => setCallApi(true)}>
        Call API
      </button>

      <hr/>

      <h1>Cart</h1>
       {cart !== null && cart.map((item) =>
        <div className="card" style={{border: 1, borderColor: "green", borderStyle: "dashed"}}>
          {item?.cakeName}, ${item?.price}
          <button onClick={() => removeFromCart(item?.cakeName)}>
              remove
          </button>
          <br/>
        </div>
      )}
      
      <hr/>
        <Cart />
      <hr/>

      {/* <CartNoContext length={cart.length}/> */}



      <>
        <h1>{text}</h1>
        <button
          type="button" onMouseEnter={() => texty("Hay")} onMouseLeave={() => texty("bye")} onKeyUp={() => texty("keyboard is pressed")}
          onClick={() => texty("My color is blue!")}
        >Blue</button>

        <button
          type="button"
          onClick={() => texty("I love yellow!")}
        >Yellow</button>
      </>


      <div className="card">
        <button onClick={() => setCount((count) => ++count)}>
          {/* <button onClick={() => setCount((count) => count + 1)}> */}
          count is {count}
        </button>
      </div>


    </>
  )
}

export default App