import React, {useState, useEffect} from 'react';
import Start from './components/Start/Start';
import Second from './components/Second/Second';
import Tinder from './components/Tinder/Tinder';
import Map from './components/Map/Map';
import City from './components/City/City';
import axios from 'axios';
import './App.css';

function App() {
  
  const [buttonValue, setButtonValue] = useState("");
  const [isHidden, setIsHidden] = useState(false);
  const [cardInfo, setCardInfo] = useState([]);

  const handleButtonValue = (value) => {
    setIsHidden(true);
    setTimeout(() => {
      setIsHidden(false);
      setButtonValue(value);
    }, 300);
  };

  useEffect(() => {
    const fetchData = () => {
      axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
        .then(response => {
          setCardInfo(response.data);
          console.log(cardInfo.length);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
    fetchData();
  }, []);

  let content = null;
  switch (buttonValue) {
    case '/second':
      content = <Second getValue={handleButtonValue}/>
      break;
    case '/tinder':
      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo}/>
      break;
    case '/map':
      content = <Map/>
      break;
    case '/city':
      content = <City getValue={handleButtonValue}/>
    break;
    default: content = <Start getValue={handleButtonValue}/>
  }

  return (
    <div className={`App ${isHidden ? 'hidden' : ''}`}>
      {content}
    </div>
  );
}

export default App;