import logo from "./logo.svg";
import "./App.css";
// import `ChakraProvider` component
//import { ChakraProvider } from "@chakra-ui/react";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";
import { Menu } from "./Menu";
import { Animal } from "./Animal";
import { useState } from "react";
//import { Button } from "./Button";
//import { Button, ButtonGroup } from "@chakra-ui/react";
import React, { useEffect } from "react";
import { Products } from "./Products";
import { Users } from "./Users";
import { Posts } from "./Posts";

function App() {
  //const animal = [];
  //const animal = ["Lev", "Lachtan", "Varan", "Slon"];

  const [animal, setAnimal] = useState(["Lev", "Lachtan", "Varan", "Slon"]);
  const [menu, setMenu] = useState(["Uvod", "O nas", "Kontakt"]);
  const [newAnimal, setNewAnimal] = useState("");

  const handleAddMenu = () => {
    console.log("pridal jsi menu");
    setMenu(["Uvod", "O nas", "Kontakt"]);
  };

  const handleDeleteMenu = () => {
    console.log("smazal jsi menu");
    setMenu([]);
  };

  const handleAddAnimal = () => {
    //const arr = ['zirafa', 'mroz'];
    //setAnimal(current => [...current, ...arr]);
    //emptyZoo = false;
    //setAnimal(["Lev", "Lachtan", "Varan", "Slon"]);
    if (newAnimal !== "") {
      setAnimal([...animal, newAnimal]);
      console.log("pridal jsi " + newAnimal);
      setNewAnimal("");
    } else console.log("prazdne pole...");
  };

  const handleOnChange = (event) => {
    console.log(event.target.value);
    setNewAnimal([event.target.value]);
  };

  const handleDeleteAnimal = () => {
    //emptyZoo = true;
    setAnimal([]);
    console.log("smazal jsi vse");
  };

  return (
    <>
      {/* <Menu
        menu={menu}
        handleDeleteMenu={handleDeleteMenu}
        handleAddMenu={handleAddMenu}
        nadpis="Menu"
      /> */}
      <Animal
        animal={animal}
        inputValue={newAnimal}
        handleAddAnimal={handleAddAnimal}
        handleDeleteAnimal={handleDeleteAnimal}
        handleOnChange={handleOnChange}
        nadpis="Super ZOO"
      />
      {/* <ChakraProvider>
        <Button colorScheme="teal">Chakra button</Button>
      </ChakraProvider> */}
      <Products></Products>
      <Users></Users>
      <Posts></Posts>
    </>
  );
}

export default App;