import React, { useRef, useState } from "react";
import PointsBlur from "./components/PointsBlur";

const Main = () => {
	const [imageSrc, setImageSrc] = useState(null);
	const blurredRegions = useRef([]);
	const [loaded, setLoaded] = useState(false);
	const [reloading, setReloading] = useState(false);
	const [listLabel, setListLabel] = useState([]);
	const [infoImage, setInfoImage] = useState({});
	const [imageName, setImageName] = useState("");

	const handleFileChange = async (event) => {
		const file = event.target.files[0];
		if (!file) return;

		const formData = new FormData();
		formData.append("image", file);
		blurredRegions.current = [];
		setLoaded(false);
		try {
			const url = "http://localhost:5000/detect_image";
			const response = await fetch(url, {
				method: "POST",
				body: formData,
			});

			const data = await response.json();
			if (data.error) {
				alert(data.error);
			} else {
				if (data?.points) {
					blurredRegions.current = data?.points?.map((pre) => [
						{ x: pre.x1, y: pre.y1, label: pre.label },
						{ x: pre.x2, y: pre.y1, label: pre.label },
						{ x: pre.x2, y: pre.y2, label: pre.label },
						{ x: pre.x1, y: pre.y2, label: pre.label },
					]);
				}
				setListLabel(
					Object.entries(data?.labels).map(([id, name]) => ({
						id: Number(id),
						name,
					}))
				);
				setImageSrc("http://localhost:5000/" + data?.image_path);
				setImageName(data?.image_name);
				setTimeout(() => setReloading((pre) => !pre), 1000);
				console.log(data);
			}
		} catch (error) {
			console.error("Error detecting QR code:", error);
		}
	};

	const handleSave = async () => {
		if (blurredRegions.current?.length > 0) {
			let arrPoints = "";
			blurredRegions.current?.forEach((points) => {
				const img_w = infoImage?.width;
				const img_h = infoImage?.height;

				// Get bounding box
				const x_min = Math.min(...points.map((p) => p.x));
				const y_min = Math.min(...points.map((p) => p.y));
				const x_max = Math.max(...points.map((p) => p.x));
				const y_max = Math.max(...points.map((p) => p.y));

				const x_center = (x_min + x_max) / 2 / img_w;
				const y_center = (y_min + y_max) / 2 / img_h;
				const width = (x_max - x_min) / img_w;
				const height = (y_max - y_min) / img_h;

				// Get class ID
				const class_id = listLabel.find((label) => label?.name === points[0].label)?.id || "0";

				const yolo_label = `${class_id} ${x_center.toFixed(6)} ${y_center.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`;

				arrPoints += yolo_label + "\n";
			});
			const url = "http://localhost:5000/save";
			const formData = new FormData();
			formData.append("list", arrPoints);
			formData.append("imageName", imageName);
			await fetch(url, {
				method: "POST",
				body: formData,
			});
		}
	};

	return (
		<div>
			<div>
				<input type="file" accept="image/*" onChange={handleFileChange} />
				<button style={{}} onClick={handleSave}>
					Save
				</button>
			</div>
			<div>
				<PointsBlur
					imageSrc={imageSrc}
					blurredRegions={blurredRegions}
					loaded={loaded}
					setLoaded={setLoaded}
					reloading={reloading}
					setReloading={setReloading}
					setInfoImage={setInfoImage}
					listLabel={listLabel}
				/>
			</div>
		</div>
	);
};

export default Main;