import React, {useContext} from 'react';
import { Disclosure } from "@headlessui/react";
import { Link } from "react-router-dom";
import logo from "../assets/img/logo.svg";
import {AuthContext} from "../providers/AuthContext";

const Navbar = () => {
    const { user } = useContext(AuthContext);

    const loggedOutNavigation = [
        "Find Opportunities",
        "Recruit Volunteers",
        "Sign Up",
        "Login"
    ];

    const loggedInNavigation = [
        "Edit Profile",
        "Settings",
        "Help",
        "Sign Out"
    ];

    return (
        <div className="w-full">
            <nav className="container relative flex flex-wrap items-center justify-between p-8 mx-auto lg:justify-between lg:flex-nowrap lg:px-0.5 xl:px-0">
            {/* Logo */}
                <Disclosure>
                    {({ open }) => (
                        <>
                            <div className="flex flex-wrap items-center justify-between w-full lg:w-auto">
                                <Link to="/">
                                    <span className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100">
                                        <span>
                                            <img
                                                src={logo}
                                                alt="heart shaped handshake logo"
                                                width="32"
                                                height="32"
                                                className="w-8"
                                            />
                                        </span>
                                        <span>Helping Hands</span>
                                    </span>
                                </Link>

                                {/* Hamburger drop down menu */}
                                {!user ? (
                                    <Disclosure.Button aria-label="Toggle Menu" className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700">
                                        <svg className="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            {open && (
                                                <path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
                                            )}
                                            {!open && (
                                                <path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                                            )}
                                        </svg>
                                    </Disclosure.Button>
                                ) : (
                                    <Disclosure.Button aria-label="Toggle Menu" className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700">
                                        <svg className="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            {open && (
                                                <path fillRule="evenodd" clipRule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
                                            )}
                                            {!open && (
                                                <path fillRule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                                            )}
                                        </svg>
                                    </Disclosure.Button>
                                )}


                                {/* Hamburger drop down menu options */}
                                {!user ? (
                                    <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden">
                                        {loggedOutNavigation.map((item, index) => (
                                            <Link key={index} to={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none">
                                                {item}
                                            </Link>
                                        ))}
                                        <Link to="/login" className="w-full px-6 py-2 mt-3 text-center text-white bg-indigo-600 rounded-md lg:ml-5">
                                            Login
                                        </Link>
                                    </Disclosure.Panel>
                                ) : (
                                    <Disclosure.Panel className="w-full flex flex-wrap my-5 lg:hidden">
                                        <div className="w-full border-b-2 border-gray-150 px-4 py-2 -ml-4 flex items-center">
                                            <img className="w-10 h-10 rounded-full" src={logo} alt="user-img" />
                                            <div className="ml-4">
                                                <strong>{user.name}</strong>
                                                <br />
                                                <span>{user.email}</span>
                                            </div>
                                        </div>
                                        {loggedInNavigation.map((item, index) => (
                                            <Link key={index} to={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none">
                                                {item}
                                            </Link>
                                        ))}
                                    </Disclosure.Panel>
                                )}
                            </div>
                        </>
                    )}
                </Disclosure>

                {/* Right side header bar */}
                {!user ? (
                    <div className="hidden text-center lg:flex lg:items-center">
                        <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex">
                            {loggedOutNavigation.map((menu, index) => (
                                <li className="mr-3 nav__item" key={index}>
                                    <Link key={index} to={`/${menu.toLowerCase().replace(/\s+/g, '-')}`} className="inline-block px-4 py-2 text-lg font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800">
                                        {menu}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>
                    ) : (
                    <div className="hidden lg:flex lg:items-center">
                        <Disclosure as="div" className="relative">
                            <Disclosure.Button as="button" aria-label="Toggle Profile Menu" className="flex items-center justify-center text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
                                <img className="w-8 h-8 rounded-full" src={logo} alt="user-img" />
                            </Disclosure.Button>
                            <Disclosure.Panel className="absolute right-0 mt-2 bg-white overflow-hidden whitespace-nowrap overflow-ellipsis divide-y divide-gray-100 rounded-lg shadow w-64 dark:bg-gray-700 dark:divide-gray-600 z-10">
                                <div className="flex items-center mb-2 mt-2">
                                    <img className="w-10 h-10 rounded-full" src={logo} alt="user-img" />
                                    <div className="ml-2 ,b flex flex-col">
                                            <strong className="text-sm">{user.name}</strong>
                                        <span className="text-xs text-gray-600">{user.email}</span>
                                    </div>
                                </div>
                                <ul className="py-2 text-sm text-gray-700 dark:text-gray-200">
                                    {loggedInNavigation.map((menu, index) => (
                                        <li className="mr-3 nav__item" key={index}>
                                            <Link key={index} to={`/${menu.toLowerCase().replace(/\s+/g, '-')}`} className="inline-block px-4 py-2 text-md font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800">
                                                {menu}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </Disclosure.Panel>
                        </Disclosure>
                    </div>
                )}
            </nav>
        </div>
    )}

export default Navbar;