import { RotateCw, Image } from "lucide-react";
import { ActionIcon, Tooltip } from "@mantine/core";
import { useStore } from "../lib/states";

const Header = () => {
	const [
		file,
		isInpainting,
		model,
		setFile,
		runInpainting,
		showPrevMask,
		hidePrevMask,
	] = useStore((state) => [
		state.file,
		state.isInpainting,
		state.settings.model,
		state.setFile,
		state.runInpainting,
		state.showPrevMask,
		state.hidePrevMask,
	]);

	const handleRerunLastMask = () => {
		runInpainting();
	};

	const onRerunMouseEnter = () => {
		showPrevMask();
	};

	const onRerunMouseLeave = () => {
		hidePrevMask();
	};

	return (
		<header className="h-[60px] px-6 py-4 absolute top-[0] flex justify-between items-center w-full z-20 border-b backdrop-filter backdrop-blur-md">
			<div className="flex items-center gap-1">
				<Tooltip label="Upload image">
					<ActionIcon
						size={36}
						variant="default"
						disabled={isInpainting}
						component="label"
					>
						<Image />

						<input
							className="hidden"
							type="file"
							onChange={(ev) => {
								const newFile = ev.currentTarget.files?.[0];
								if (newFile) {
									setFile(newFile);
								}
							}}
							accept="image/png, image/jpeg"
						/>
					</ActionIcon>
				</Tooltip>

				{file && !model.need_prompt ? (
					<Tooltip label="Rerun previous mask">
						<ActionIcon
							size={36}
							variant="default"
							disabled={isInpainting}
							onClick={handleRerunLastMask}
							onMouseEnter={onRerunMouseEnter}
							onMouseLeave={onRerunMouseLeave}
						>
							<div className="icon-button-icon-wrapper">
								<RotateCw />
							</div>
						</ActionIcon>
					</Tooltip>
				) : (
					<></>
				)}
			</div>

			<div className="flex gap-1"></div>
		</header>
	);
};

export default Header;