import { IconButton, ImageUploadButton } from "@/components/ui/button";

import PromptInput from "./PromptInput";
import { RotateCw, Image } from "lucide-react";
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 bg-background/70">
			<div className="flex items-center gap-1">
				<ImageUploadButton
					disabled={isInpainting}
					tooltip="Upload image"
					onFileUpload={(file) => {
						setFile(file);
					}}
				>
					<Image />
				</ImageUploadButton>

				{file && !model.need_prompt ? (
					<IconButton
						disabled={isInpainting}
						tooltip="Rerun previous mask"
						onClick={handleRerunLastMask}
						onMouseEnter={onRerunMouseEnter}
						onMouseLeave={onRerunMouseLeave}
					>
						<RotateCw />
					</IconButton>
				) : (
					<></>
				)}
			</div>

			{model.need_prompt ? <PromptInput /> : <></>}

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

export default Header;
