import { getLocalizedString } from "@olenbetong/appframe-core";

import { StarIcon } from "./icons.js";

export type AppMenuFavoriteButtonProps = {
	/** Label of the app the toggle belongs to, used for the accessible name. */
	appLabel: string;
	isFavorite: boolean;
	onToggle: () => void;
	/**
	 * Shares the tab stop of the app link it belongs to, so Tab reaches it
	 * without adding a stop per app to the arrow key navigation. See
	 * `useRovingTabIndex().getSecondaryProps`.
	 */
	tabIndex: number;
	onFocus: () => void;
};

/**
 * Star toggle rendered next to an app link. It is only visible while the entry
 * is hovered or focused, unless the app already is a favorite.
 */
export function AppMenuFavoriteButton({
	appLabel,
	isFavorite,
	onToggle,
	tabIndex,
	onFocus,
}: AppMenuFavoriteButtonProps) {
	let label = isFavorite ? getLocalizedString("Remove from favorites") : getLocalizedString("Add to favorites");

	return (
		<button
			type="button"
			className="ob-app-menu__favorite"
			aria-pressed={isFavorite}
			aria-label={`${label}: ${appLabel}`}
			title={label}
			data-favorite={isFavorite ? "true" : undefined}
			tabIndex={tabIndex}
			onFocus={onFocus}
			onClick={onToggle}
		>
			<StarIcon filled={isFavorite} />
		</button>
	);
}