import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Start from '../Start/Start';
import Second from '../Second/Second';
import Tinder from '../Tinder/Tinder';
import Main from '../Main/Main';
import City from '../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 [userData, setUserData] = 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);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
    fetchData();
  }, []);

  useEffect(() => {
    // Загрузка userData из localStorage при монтировании компонента
    const savedUserData = JSON.parse(localStorage.getItem('userData'));
    if (savedUserData) {
      setUserData(savedUserData);
    }
  }, []);

  useEffect(() => {
    // Сохранение userData в localStorage при изменении
    localStorage.setItem('userData', JSON.stringify(userData));
    console.log(userData);
  }, [userData]);


  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />}/>
        <Route path="second" element={<Second getValue={handleButtonValue} setUserData={setUserData} />} />
        <Route path="tinder" element={<Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />} />
        <Route path="city" element={<City getValue={handleButtonValue} setUserData={setUserData} />} />
        <Route path="main" element={<Main userData={userData}/>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;