import { useState } from "react";
import { useFurnitureJobs } from "@/components/admin/studio/use-furniture-jobs";

export function FurnitureJobsHarness() {
	const [completions, setCompletions] = useState(0);
	const history = useFurnitureJobs(
		() => setCompletions((value) => value + 1),
		true,
	);
	return (
		<section aria-label="Import history hook">
			<button
				type="button"
				onClick={() => {
					void history.refresh();
					void history.refresh();
				}}
			>
				Refresh twice
			</button>
			<button type="button" onClick={() => void history.navigate("next")}>
				Next page
			</button>
			<button type="button" onClick={() => void history.navigate("previous")}>
				Previous page
			</button>
			<output aria-label="Page">{history.page}</output>
			<output aria-label="Completions">{completions}</output>
			<output aria-label="Loading">{String(history.loading)}</output>
			<output aria-label="Jobs">
				{history.jobs.map((job) => `${job.id}:${job.state}`).join(",")}
			</output>
		</section>
	);
}