import { PropsWithChildren, useState } from 'react';
import ApplicationLogo from '@/Components/ApplicationLogo';
import Footer from '@/Components/Footer';
import { Link, usePage } from '@inertiajs/react';
import { User } from '@/types';
import { AlertOctagon, Bell, Bookmark, ChevronDown, Grid, Home, LogOut } from 'react-feather';
import Modal from '@/Components/Modal';
import axios from 'axios';
import ModalButton from '@/Components/ModalButton';
import NavIconLink from '@/Components/NavIconLink';

export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) {
    const { url } = usePage();
    const [isUserOptionsHiglighted, setIsUserOptionsHiglighted] = useState(false);
    const [isDashboardHiglighted, setIsDashboardHiglighted] = useState(false);
    const [isNotificationsHiglighted, setIsNotificationsHiglighted] = useState(false);
    const [isBookmarksHiglighted, setIsBookmarksHiglighted] = useState(false);

    const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
    const handleCloseLogoutModal = () => {
        setIsLogoutModalOpen(false);

        axios.post('/logout')
            .then(response => {
                console.log(response.data);
                window.location.href = '/';
            })
            .catch(error => {
                console.error(error);
            });
    };

    return (
        <div>
            <header className="navbar px-4 bg-primary-background border-b-2 border-secondary-main">
                <div id="ProjectTitle" className="navbar-start">
                    <Link href="/dashboard">
                        <ApplicationLogo />
                    </Link>
                </div>

                <nav className="navbar-end">
                    <NavIconLink href="/dashboard" active={url === '/dashboard'}
                        onMouseEnter={() => setIsDashboardHiglighted(true)}
                        onMouseLeave={() => setIsDashboardHiglighted(false)}
                    >
                            <Home className={isDashboardHiglighted || url === '/dashboard' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
                    </NavIconLink>
                    <NavIconLink href="/notifications" active={url === '/notifications'}
                        onMouseEnter={() => setIsNotificationsHiglighted(true)}
                        onMouseLeave={() => setIsNotificationsHiglighted(false)}
                    >
                            <Bell className={isNotificationsHiglighted || url === '/notifications' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
                    </NavIconLink>
                    <NavIconLink href="/bookmarks" active={url === '/bookmarks'}
                        onMouseEnter={() => setIsBookmarksHiglighted(true)}
                        onMouseLeave={() => setIsBookmarksHiglighted(false)}
                    >
                            <Bookmark className={isBookmarksHiglighted || url === '/bookmarks' ? "stroke-neutral-10 active" : "stroke-secondary-main"} />
                    </NavIconLink>
                    
                    <div className="dropdown" id='UserOptions'>
                        <div tabIndex={0} role="button"
                            onMouseEnter={() => setIsUserOptionsHiglighted(true)}
                            onMouseLeave={() => setIsUserOptionsHiglighted(false)}
                            className="btn m-0 bg-primary-background border-primary-background shadow-xl text-md hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white">
                                {user.username}
                                <ChevronDown className={isUserOptionsHiglighted ? "stroke-neutral-10" : "stroke-secondary-main"} />
                        </div>
                        <ul tabIndex={0} className="dropdown-content z-[1] menu rounded-btn bg-neutral-10 shadow-md px-0">
                            <li><Link href={route('profile.edit')} className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none">
                                Settings
                            </Link></li>
                            <li><Link href='/about' className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none">
                                About CodeHub
                            </Link></li>
                            <li><button onClick={() => setIsLogoutModalOpen(true)}
                                className='outline-none hover:bg-secondary-hover hover:text-white focus:bg-secondary-pressed focus:text-white transition duration-150 ease-in-out'>
                                    Log Out
                            </button></li>
                        </ul>
                    </div>
                </nav>
            </header>

            <main>
                {children}
            </main>

            <footer>
                <Footer />
            </footer>

            <Modal show={isLogoutModalOpen} onClose={() => setIsLogoutModalOpen(false)} maxWidth="lg" styling='warning'>
                <div className="p-4 flex flex-col items-center">
                    <AlertOctagon stroke='#E5C100' size={80} />
                    <h2 className="text-xl font-bold mt-2">Confirm Logout</h2>
                    <p className="mt-4">Are you sure you want to logout?</p>

                    <div className='flex items-center justify-center mt-3'>
                        <ModalButton onClick={() => setIsLogoutModalOpen(false)} className="mx-1 bg-neutral-40 text-black hover:bg-neutral-60 hover:text-white active:bg-neutral-80 active:text-white">
                            Cancel
                        </ModalButton>
                        <ModalButton onClick={handleCloseLogoutModal} className="mx-1 bg-error-main text-white hover:bg-error-hover active:bg-error-pressed">
                            Logout
                            <LogOut stroke='#FFFFFF' />
                        </ModalButton>
                    </div>
                    
                </div>
            </Modal>
        </div>
    )
}