import type { BaseKey, FormAction } from "@refinedev/core";
import { useModalForm } from "@refinedev/react-hook-form";
import { useCallback, useState } from "react";

{/*

    1. Click on "Open Create Modal"  ➝  State label will change to "visible" ✅

    2. Click on "Close Modal"  ➝  State label will change to "invisible" ✅

    3. Click on "Open Edit Modal"  ➝  State label will change to "visible" ✅

    4. Click on "Close Modal"  ➝ State label will change to "invisible" ✅

    5. Click on "Open Create Modal"  ➝ State label will stay at "invisible" ❌

/*}

export const Repro = () => {
	const [action, setAction] = useState<FormAction>();

	const form = useModalForm({
		refineCoreProps: {
			action: action,
			resource: "organization-contacts",
		},
	});

	const showModal = useCallback(
		(action: FormAction, id?: BaseKey) => {
			setAction(action);
			form.modal.show(id);
		},
		[form],
	);

	return (
		<div>
			<span>
				Current Modal State: {form.modal.visible ? "visible" : "invisible"}
			</span>
			<div
				style={{
					display: "flex",
					flexDirection: "row",
					gap: 16,
					alignItems: "center",
				}}
			>
				<button type="button" onClick={() => showModal("create")}>
					Open Create Modal
				</button>
				<button type="button" onClick={() => showModal("edit", 4)}>
					Open Edit Modal
				</button>
				<button type="button" onClick={() => form.modal.close()}>
					Close Modal
				</button>
			</div>
		</div>
	);
};