import { ShrinkIcon, ZoomMinusIcon, ZoomPlusIcon } from "@navikt/aksel-icons";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { ResponsiveButton } from "../../ResponsiveButton.js";
import { useZoom } from "./ZoomContext.js";

interface Props {
	disabled?: boolean;
	isSmall?: boolean;
}

export function ZoomControls({ disabled, isSmall = false }: Props) {
	let { zoom, zoomIn, zoomOut, resetZoom, canZoomIn, canZoomOut, isZoomed } = useZoom();

	return (
		<>
			<ResponsiveButton
				icon={<ZoomMinusIcon aria-hidden />}
				label={getLocalizedString("Zoom out")}
				onClick={zoomOut}
				disabled={disabled || !canZoomOut}
				isSmall={isSmall}
			/>
			<span className="image-editor__zoom-level">{Math.round(zoom * 100)}%</span>
			<ResponsiveButton
				icon={<ZoomPlusIcon aria-hidden />}
				label={getLocalizedString("Zoom in")}
				onClick={zoomIn}
				disabled={disabled || !canZoomIn}
				isSmall={isSmall}
			/>
			<ResponsiveButton
				disabled={!isZoomed}
				icon={<ShrinkIcon aria-hidden />}
				label={getLocalizedString("Reset zoom")}
				onClick={resetZoom}
				isSmall={isSmall}
			/>
		</>
	);
}