import { RadioIcon, UserCircleIcon } from "@heroicons/react/24/solid";
import { Link } from "@remix-run/react";
import type { UserWithFavoriteStationsClientSide } from "~/models/user.server";

export function GithubIconLink() {
    return (
        <a aria-label="Github | Awesome Radio" target="_blank" href="https://github.com/wmluke/awesome-radio"
           rel="noopener noreferrer"
           className="btn btn-ghost drawer-button btn-square normal-case">
            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                 className="inline-block h-8 w-8 fill-current">
                <path
                    d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path>
            </svg>
        </a>
    );
}

export function UserDropdown() {
    return (
        <div className="dropdown dropdown-end">
            <label tabIndex={0} className="btn btn-ghost btn-circle avatar placeholder">
                <UserCircleIcon className="w-8 h-8" />
            </label>
            <ul tabIndex={0}
                className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-200 rounded-box w-30">
                <li>
                    <Link to="/logout">Logout</Link>
                </li>
            </ul>
        </div>
    );
}

export type TopNavbarProps = { user?: UserWithFavoriteStationsClientSide; };

export function TopNavbar({ user }: TopNavbarProps) {
    return (
        <div className="w-full navbar bg-base-300 lg:justify-end">
            <div className="flex-none lg:hidden">
                <label htmlFor="primary-drawer" className="btn btn-square btn-ghost">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         className="inline-block w-6 h-6 stroke-current">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                              d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </label>
            </div>
            <div className="flex-1 px-2 mx-2 gap-2 lg:hidden">
                <RadioIcon className="h-8 w-8 p-0" />
                <h1 className="text-2xl p-0">Awesome Radio</h1>
            </div>
            <div className="flex-none gap-4">
                <GithubIconLink />
                {user ?
                    <UserDropdown /> :
                    <Link to="/join" className="btn btn-accent btn-sm">Join</Link>
                }

            </div>
        </div>
    );
}