import { useState } from 'react';
import './App.css';
import Greeting from './components/Greeting';
import Hosting from './components/Hosting';
import InitialSetup from './components/InitialSetup';
import Program from './components/Program';
import Snowflakes from './components/Snowflakes';
import { FullScreenLoading } from './components/Loading';
import SecretSanta from './components/SecretSanta';
import Suggestions from './components/Suggestions';
import AttendanceTable from './components/AttendnaceTable';

function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);

  const handleLogout = () => {
    const cookies = document.cookie.split(";");

    for (let cookie of cookies) {
      const cookieName = cookie.split("=")[0].trim();
      // Set the cookie's expiration date to the past to delete it
      document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`;
    }
    window.location.reload();
  };

  const toggleNav = () => {
    setIsNavOpen(!isNavOpen);
  };

  return (
    <>
      <FullScreenLoading />
      <Snowflakes />
      <InitialSetup />

      <button onClick={toggleNav} className="nav-toggle">
        {isNavOpen ? '❌' : 'Меню 📂'}
      </button>

      <nav className={isNavOpen ? 'open' : ''}>
        <ul>
          <li>
            <a href="#greeting">Приглашение</a>
          </li>
          <li>
            <a href="#hosting">Поселение</a>
          </li>
          <li>
            <a href="#program">Программа</a>
          </li>
          <li>
            <a href="#suggestions">Пожелания</a>
          </li>
          <li>
            <a href="#santa">Secret Santa</a>
          </li>
          <li>
            <a href="#attendance-table">Кто празднует?</a>
          </li>
          <li>
            <button onClick={() => handleLogout()}>Выйти</button>
          </li>
        </ul>
      </nav>

      <div id="greeting">
        <Greeting />
      </div>
      <div id="hosting">
        <Hosting />
      </div>
      <div id="program">
        <Program />
      </div>
      <div id="suggestions">
        <Suggestions />
      </div>
      <div id="santa">
        <SecretSanta />
      </div>
      <div id="attendance-table">
        <AttendanceTable />
      </div>
    </>
  );
}

export default App;