import "./AppMenu.css";

import { getLocalizedString } from "@olenbetong/appframe-core";
import clsx from "clsx";
import type { ButtonHTMLAttributes, Ref } from "react";

export type AppMenuToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-expanded" | "type"> & {
	/** Whether the app menu is currently open. Controls `aria-expanded`. */
	open: boolean;
	/** Shows a badge on the button, pointing at the install action inside the menu. */
	hasUpdate?: boolean;
	ref?: Ref<HTMLButtonElement>;
};

/**
 * Toolbar button that opens the app menu. Rendering the button separately from
 * the menu lets the toolbar place it wherever it needs to, while the menu itself
 * is rendered as a top layer dialog.
 */
export function AppMenuToggle({ open, hasUpdate, className, ref, ...props }: AppMenuToggleProps) {
	return (
		<button
			{...props}
			ref={ref}
			type="button"
			className={clsx("ob-app-menu-toggle", className)}
			aria-label={
				hasUpdate
					? `${getLocalizedString("Applications")} (${getLocalizedString("Update available")})`
					: getLocalizedString("Applications")
			}
			aria-haspopup="dialog"
			aria-expanded={open}
			data-update={hasUpdate ? "" : undefined}
		>
			<svg
				className="ob-app-menu-toggle__icon"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="currentColor"
				aria-hidden="true"
				focusable="false"
				width="24"
				height="24"
			>
				<path d="M4 4h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 10h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4zM4 16h4v4H4zm6 0h4v4h-4zm6 0h4v4h-4z" />
			</svg>
			{hasUpdate && <span className="ob-app-menu-toggle__badge" aria-hidden="true" />}
		</button>
	);
}
