import { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import { FaDiscord } from "react-icons/fa";
import { FaTelegram } from "react-icons/fa";
import { SiGitea } from "react-icons/si";
import { FaHome } from "react-icons/fa";
import { FaDatabase } from "react-icons/fa";
import { IoCodeSlashSharp } from "react-icons/io5";
import { FaVideo } from "react-icons/fa";
import { RiAccountCircleFill } from "react-icons/ri";

function NavBar() {
    const [externalLinks, setExternalLinks] = useState({
        discord: "#",
        telegram: "#",
        gitea: "#",
    });

    useEffect(() => {
        fetch("/api/links")
            .then((response) => response.json())
            .then((data) => setExternalLinks(data))
            .catch((error) => console.error("Error fetching links:", error));
    }, []);

    const MenuItem = ({ to, children }) => {
        return (
            <li>
                <NavLink to={to} className={({ isActive }) => (isActive ? "menu-active" : "")}>
                    {children}
                </NavLink>
            </li>
        );
    };

    return (
        <>
            <div className="navbar sticky top-0 z-300 bg-slate-700 shadow-sm text-white">
                <div className="navbar-start">
                    <div className="dropdown">
                        <div tabIndex={0} role="button" className="btn btn-ghost lg: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"
                        >
                            <MenuItem to="/">
                                <FaHome alt="Home" width={20} height={20} />
                                Home
                            </MenuItem>
                            <MenuItem to="/cache">
                                <FaDatabase alt="Cache" width={20} height={20} />
                                Cache
                            </MenuItem>
                            <MenuItem to="/api">
                                <IoCodeSlashSharp alt="API" width={20} height={20} />
                                API
                            </MenuItem>
                            <MenuItem to="/testplayer">
                                <FaVideo alt="Test Player" width={20} height={20} />
                                Test Player
                            </MenuItem>
                            <MenuItem to="/account">
                                <RiAccountCircleFill alt="My Account" width={20} height={20} />
                                My Account
                            </MenuItem>

                            <div className="divider">Social links</div>
                            <li>
                                <a
                                    href={externalLinks.discord}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <FaDiscord alt="Discord" width={20} height={20} />
                                    Discord
                                </a>
                            </li>
                            <li>
                                <a
                                    href={externalLinks.telegram}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <FaTelegram alt="Telegram" width={20} height={20} />
                                    Telegram
                                </a>
                            </li>
                            <li>
                                <a
                                    href={externalLinks.gitea}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <SiGitea alt="Gitea" width={20} height={20} />
                                    Gitea
                                </a>
                            </li>
                        </ul>
                    </div>
                    <a className="btn btn-ghost text-xl">CDRM-Project</a>
                </div>
                <div className="navbar-center hidden lg:flex">
                    <ul className="menu menu-horizontal px-1">
                        <MenuItem to="/">
                            <FaHome alt="Home" width={20} height={20} />
                            Home
                        </MenuItem>
                        <MenuItem to="/cache">
                            <FaDatabase alt="Cache" width={20} height={20} />
                            Cache
                        </MenuItem>
                        <MenuItem to="/api">
                            <IoCodeSlashSharp alt="API" width={20} height={20} />
                            API
                        </MenuItem>
                        <MenuItem to="/testplayer">
                            <FaVideo alt="Test Player" width={20} height={20} />
                            Test Player
                        </MenuItem>
                        <MenuItem to="/account">
                            <RiAccountCircleFill alt="My Account" width={20} height={20} />
                            My Account
                        </MenuItem>
                    </ul>
                </div>
                <div className="navbar-end hidden lg:flex">
                    <a
                        className="btn btn-ghost hover:text-indigo-400"
                        href={externalLinks.discord}
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <div className="tooltip tooltip-bottom" data-tip="CDRM Discord">
                            <FaDiscord className="h-6 w-6" />
                        </div>
                    </a>
                    <a
                        className="btn btn-ghost hover:text-sky-400"
                        href={externalLinks.telegram}
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <div className="tooltip tooltip-bottom" data-tip="CDRM Telegram">
                            <FaTelegram className="h-6 w-6" />
                        </div>
                    </a>
                    <a
                        className="btn btn-ghost hover:text-lime-400"
                        href={externalLinks.gitea}
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <div className="tooltip tooltip-left" data-tip="CDRM Gitea">
                            <SiGitea className="h-6 w-6" />
                        </div>
                    </a>
                </div>
            </div>
        </>
    );
}

export default NavBar;