import React, { useState, useEffect } from 'react';
import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
import { useHistory, useLocation, Link } from "react-router-dom";
import logo from './images/logo.png';
import './navbar.css';

const Navbar = () => {
    const [toggleMenu, setToggleMenu] = useState(false);
    const history = useHistory();
    const location = useLocation();

    const isActive = (history, path) => {
        if (history.location.pathname === path) {
            return { color: "#F05454" }
        } else {
            return { color: "#ffffff" }
        }
    };

    return (
        <div className="gradient_background">
            <div className="navbar">
                <div className="navbar-links">
                    <div className="navbar-links_logo">
                        <img src={logo} />
                        <p>V'DO</p>
                    </div>
                    <div className="navbar-links_container">
                        <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
                        <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
                        <p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
                        <p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
                        <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
                        <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
                    </div>
                </div>
                <div className="navbar-sign">
                    <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
                    <Link style={isActive(history, '/register')} to="/register">
                        <button type="button">Sign up</button>
                    </Link>
                </div>
                <div className="navbar-menu">
                    {toggleMenu
                        ? <RiCloseLine color="#fff" size={27} onClick={() => setToggleMenu(false)} />
                        : <RiMenu3Line color="#fff" size={27} onClick={() => setToggleMenu(true)} />}
                    {toggleMenu && (
                        <div className="navbar-menu_container scale-up-center">
                            <div className="navbar-menu_container-links">
                                <p><Link style={isActive(history, '/')} to="/">Home</Link></p>
                                <p><Link style={isActive(history, '#')} to="#">Video summarizer</Link></p>
                                <p><Link style={isActive(history, '/digital-human')} to="/digital-human">Digital human</Link></p>
                                <p><Link style={isActive(history, '/class-notes')} to="/class-notes">Class notes</Link></p>
                                <p><Link style={isActive(history, '/about-us')} to="/about-us">About us</Link></p>
                                <p><Link style={isActive(history, '/contact-us')} to="/contact-us">Contact us</Link></p>
                            </div>
                            <div className="navbar-menu_container-links-sign">
                                <p><Link style={isActive(history, '/login')} to="/login">Sign in</Link></p>
                                <Link style={isActive(history, '/register')} to="/register">
                                    <button type="button">Sign up</button>
                                </Link>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default Navbar;