import { ToggleGroup, Tooltip } from "@digdir/designsystemet-react";
import { MonitorIcon, MoonIcon, SunIcon } from "@navikt/aksel-icons";
import { getLocalizedString } from "@olenbetong/appframe-core";

import { type ColorSchemePreference, useColorSchemePreference } from "../../colorScheme.js";

const OPTIONS: Array<{ value: ColorSchemePreference; label: string; Icon: typeof MonitorIcon }> = [
	{ value: "auto", label: "Follow system setting", Icon: MonitorIcon },
	{ value: "light", label: "Light mode", Icon: SunIcon },
	{ value: "dark", label: "Dark mode", Icon: MoonIcon },
];

/** Icon-only color scheme toggle, shown at the bottom of the app menu rail. */
export function AppMenuColorScheme() {
	let [preference, setPreference] = useColorSchemePreference();

	return (
		<div className="ob-app-menu__color-scheme">
			<ToggleGroup
				data-size="sm"
				data-toggle-group={getLocalizedString("Theme")}
				aria-label={getLocalizedString("Theme")}
				value={preference}
				onChange={(value) => setPreference(value as ColorSchemePreference)}
			>
				{OPTIONS.map(({ value, label, Icon }) => {
					let localizedLabel = getLocalizedString(label);

					return (
						<Tooltip key={value} content={localizedLabel}>
							<ToggleGroup.Item value={value}>
								<Icon aria-hidden fontSize="1.25rem" />
								{/* The radio takes its accessible name from the label's text content. */}
								<span className="ob-app-menu__color-scheme-label">{localizedLabel}</span>
							</ToggleGroup.Item>
						</Tooltip>
					);
				})}
			</ToggleGroup>
		</div>
	);
}