import { Link, useFetcher } from "@remix-run/react";
import Meta from "~/lib/api/meta";
import { User, UserSettings } from "~/lib/api/user";
import Logo from "./Logo";

import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import {
	BrightnessHigh,
	BrightnessHighFill,
	MoonFill,
} from "react-bootstrap-icons";

export default function MainNavbar({
	user,
	settings,
}: {
	meta: Meta;
	user?: User;
	settings: UserSettings;
}) {
	const fetcher = useFetcher();

	const userMenu = user ? (
		<NavDropdown title={<>@{user.username}</>} align="end">
			<NavDropdown.Item as={Link} to={`/@${user.username}`}>
				View profile
			</NavDropdown.Item>
			<NavDropdown.Item as={Link} to="/settings">
				Settings
			</NavDropdown.Item>
			<NavDropdown.Divider />
			<NavDropdown.Item as={Link} to="/auth/logout">
				Log out
			</NavDropdown.Item>
		</NavDropdown>
	) : (
		<Nav.Link to="/auth/login" as={Link}>
			Log in or sign up
		</Nav.Link>
	);

	const ThemeIcon =
		settings.dark_mode === null
			? BrightnessHigh
			: settings.dark_mode
				? MoonFill
				: BrightnessHighFill;

	return (
		<Navbar expand="lg" className="mb-4 mx-2">
			<Navbar.Brand to="/" as={Link}>
				<Logo />
			</Navbar.Brand>
			<Navbar.Toggle aria-controls="main-navbar" />
			<Navbar.Collapse id="main-navbar">
				<Nav className="ms-auto">{userMenu}</Nav>
			</Navbar.Collapse>
			<fetcher.Form method="POST" action="/dark-mode">
				<NavDropdown
					title={
						<>
							<ThemeIcon /> Theme
						</>
					}
					align="end"
				>
					<NavDropdown.Item as="button" name="theme" value="auto" type="submit">
						Automatic
					</NavDropdown.Item>
					<NavDropdown.Item as="button" name="theme" value="dark" type="submit">
						Dark mode
					</NavDropdown.Item>
					<NavDropdown.Item
						as="button"
						name="theme"
						value="light"
						type="submit"
					>
						Light mode
					</NavDropdown.Item>
				</NavDropdown>
			</fetcher.Form>
		</Navbar>
	);
}
