import {useState} from "@wordpress/element";
import {Button, Modal, TextControl} from "@wordpress/components";

export default function CreateMenuModal({isOpen, onRequestClose, onCreate}) {
	const [name, setName] = useState("");
	const [description, setDescription] = useState("");
	const [busy, setBusy] = useState(false);

	if (!isOpen) return null;

	return (
		<Modal title="Create menu" onRequestClose={onRequestClose}>
			<TextControl
				label="Menu name"
				value={name}
				onChange={setName}
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>
			<TextControl
				label="Description"
				value={description}
				onChange={setDescription}
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			<div style={{display: "flex", gap: 8, marginTop: 12, justifyContent: "flex-end"}}>
				<Button variant="tertiary" onClick={onRequestClose} disabled={busy}>
					Cancel
				</Button>
				<Button
					variant="primary"
					disabled={!name.trim() || busy}
					onClick={async () => {
						setBusy(true);
						try {
							await onCreate({name: name.trim(), description});
							setName("");
							setDescription("");
							onRequestClose();
						} finally {
							setBusy(false);
						}
					}}
				>
					Create
				</Button>
			</div>
		</Modal>
	);
}
