import React, { useState, useEffect } from "react";
import logo from "./assets/images/logo.svg";
// import "./App.css";
import styles from "./App.module.css";
import robots from "./mockdata/robots.json";
import Robot from "./components/robots";
import RobotDiscount from'./components/RobotDiscount'
import ShoppingCart from "./components/ShoppingCart";
import { Console } from "console";
interface Props {}
interface State {
  robotGallary: any;
  counter: number;
}
const App: React.FC = (props) => {
  const [counter, setCounter] = useState<number>(0);
  const [robotGallary, setrobotGallary] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error,setError] = useState<String>()
  useEffect(() => {
    document.title = `点击次数为：${counter}`;
  }, [counter]);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try{

    
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      setrobotGallary(data);
      setLoading(false);
      }catch(e){
        setError(e.message)
      }
    };
    fetchData();
  }, []);

  return (
    <div className={styles.app}>
      <div className={styles.appHeader}>
        <img src={logo} className={styles.appLogo} alt="" />
        <h1>老徐的机器人练习平台</h1>
        <button
          onClick={() => {
            setCounter(counter + 1);
          }}
        >
          jishuqi
        </button>
        <span>counter:{counter}</span>
      </div>
      <ShoppingCart />
      {!error || error!==''&& <div>网站出错:{error}</div>}
      {!loading ? (
        <div className={styles.robotList}>
          {robotGallary.map((item,index) => (
            index%2==0?
            <RobotDiscount id={item.id} email={item.email} name={item.name}/>:
            <Robot id={item.id} email={item.email} name={item.name} />
          ))}
        </div>
      ) : (
        <h2>Loading加载中</h2>
      )}
    </div>
  );
};

export default App;