import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
import ThemeController from '../components/themeController'
import { ToastContainer } from 'react-toastify'
import { useGlobalEvents } from '@/hooks';
import useLauncherStore from '@/stores/launcherStore';
import useDiffStore from '@/stores/diffStore';

export const Route = createRootRoute({
    component: RootLayout
})

function RootLayout() {
    const { setGameRunning, setServerRunning, setProxyRunning, setProgressDownload, setDownloadSpeed } = useLauncherStore()
    const { setProgressUpdate, setMaxProgressUpdate, setMessageUpdate, setStageType } = useDiffStore()
    useGlobalEvents({
        setGameRunning,
        setServerRunning,
        setProxyRunning,
        setProgressUpdate,
        setMaxProgressUpdate,
        setProgressDownload,
        setDownloadSpeed,
        setMessageUpdate,
        setStageType
    });

    return (
        <>
            <div className="navbar bg-base-100 shadow-sm sticky top-0 z-50 px-3">
                <div className="navbar-start">
                    <div className="dropdown">
                        <div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
                        </div>
                        <ul
                            tabIndex={0}
                            className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
                            <li><Link to="/">Home</Link></li>

                            <li>
                                <a>Tools</a>
                                <ul className="p-2">
                                    <li><Link to="/language">Language</Link></li>
                                    <li><Link to="/diff">Diff</Link></li>
                                </ul>
                            </li>
                            <li>
                                <a>Plugins</a>
                                <ul className="p-2">
                                    <li><Link to="/analysis">Analysis (Veritas)</Link></li>
                                    <li><Link to="/srtools">SrTools</Link></li>
                                </ul>
                            </li>
                            <li><Link to="/howto">How to?</Link></li>
                            <li><Link to="/about">About</Link></li>
                        </ul>
                    </div>
                    <Link to="/" className="grid grid-cols-1 items-start text-left gap-0 hover:scale-105 px-2">
                        <div className="flex items-center justify-center">
                            <img src="/ff-launcher.png" alt="Logo" className='w-13 h-13' />
                            <div className="flex flex-col justify-center items-start">
                                <h1 className="text-xl font-bold">
                                    <span className="text-emerald-500">Firefly </span>
                                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500">
                                        Launcher
                                    </span>
                                </h1>
                                <p className="text-sm text-gray-500">By Kain</p>
                            </div>
                        </div>
                    </Link>
                </div>
                <div className="navbar-center hidden md:flex">
                    <ul className="menu menu-horizontal px-1">
                        <li><Link to="/">Home</Link></li>
                        <li>
                            <details>
                                <summary>Tools</summary>
                                <ul className="p-2">
                                    <li><Link to="/language">Language</Link></li>
                                    <li><Link to="/diff">Diff</Link></li>
                                </ul>
                            </details>
                        </li>
                        <li>
                            <details>
                                <summary>Plugins</summary>
                                <ul className="p-2">
                                    <li><Link to="/analysis">Analysis (Veritas)</Link></li>
                                    <li><Link to="/srtools">SrTools</Link></li>
                                </ul>
                            </details>
                        </li>
                        <li><Link to="/howto">How to?</Link></li>
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </div>
                <div className="navbar-end">
                    <ThemeController />
                </div>
            </div>
            <div className="min-h-[78vh]">
                <Outlet />
            </div>
            <ToastContainer />
        </>
    )
}