import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './Header.css';
import AuthModal from './AuthModal.js';
import { useAuth } from './AuthContext.js';
import { useRentalContext } from './RentalContext'; // Import useRentalContext

function Header() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const { isLoggedIn, login, logout } = useAuth();
    const [users, setUsers] = useState([]);
    const { clearRentals } = useRentalContext(); // Use clearRentals from RentalContext

    useEffect(() => {
        fetchUsers();
    }, []);

    const fetchUsers = async () => {
        try {
            const data = require('../../src/storage/users.json');
            setUsers(data);
        } catch (error) {
            console.error('Ошибка при загрузке пользователей:', error);
        }
    };

    const openModal = () => {
        console.log('openModal called');
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };

    const handleLogin = async (username, password) => {
        console.log('handleLogin called', username, password);
        const user = users.find(user => user.username === username && user.password === password);

        if (user) {
            // Успешная аутентификация
            login(user); // Сохраняем данные пользователя в AuthContext
            localStorage.setItem('user_id', user.user_id.toString()); // Сохраняем user_id в localStorage
            closeModal();
        } else {
            // Неверные учетные данные
            alert('Неверное имя пользователя или пароль');
        }
    };

    const handleLogout = () => {
        logout();
        localStorage.removeItem('user_id'); // Удаляем user_id из localStorage при выходе
        clearRentals(); // Clear rentals from context
    };

    return (
        <header>
            <div className="container">
                <div className="logo">
                    <img src={process.env.PUBLIC_URL + '/images/Logo(Nav) (1).png'} alt="изображение" />
                    <span>KeyNest</span>
                </div>
                <nav className="menu">
                    <Link to="/">Home</Link>
                    <Link to="/about">About</Link>
                    <Link to="/myrentals">Rentals</Link>
                    <Link to="/contact">Contact</Link>
                </nav>
                {isLoggedIn ? (
                    <button className="logout-button button" onClick={handleLogout}>Logout</button>
                ) : (
                    <button className="login-button button" onClick={openModal}>Login</button>
                )}
                <AuthModal isOpen={isModalOpen} onRequestClose={closeModal} onLogin={handleLogin} />
            </div>
        </header>
    );
}

export default Header;