import {Button, PanelBody, TextControl, Notice} from "@wordpress/components";

export default function ItemEditor({item, onChange, onSave, onDelete, onOpenSettings, busy}) {
	if (!item) {
		return (
			<div className="jet-menu-editor">
				<div className="jet-menu-editor__header">
					<strong>Menu item</strong>
				</div>
				<div className="jet-menu-editor__body">
					<Notice status="info" isDismissible={false}>
						Select an item to edit.
					</Notice>
				</div>
			</div>
		);
	}

	return (
		<div className="jet-menu-editor">
			<div className="jet-menu-editor__header">
				<strong>Menu item</strong>
				<div style={{display: "flex", gap: 8}}>
					<Button variant="secondary" onClick={onOpenSettings} disabled={busy}>
						Item settings
					</Button>
					<Button variant="tertiary" isDestructive onClick={onDelete} disabled={busy}>
						Delete
					</Button>
				</div>
			</div>

			<div className="jet-menu-editor__body">
				<PanelBody title="Label & URL" initialOpen>
					<TextControl
						label="Label"
						value={item.title || ""}
						onChange={(v) => onChange({title: v})}
						__next40pxDefaultSize
						__nextHasNoMarginBottom
					/>

					{item.type === "custom" ? (
						<TextControl
							label="URL"
							value={item.url || ""}
							onChange={(v) => onChange({url: v})}
							__next40pxDefaultSize
							__nextHasNoMarginBottom
						/>
					) : (
						<Notice status="info" isDismissible={false}>
							URL/source is assigned from left panel (Pages/CPT/Taxonomies). You can change label here.
						</Notice>
					)}
				</PanelBody>

				<div style={{display: "flex", gap: 8, marginTop: 12}}>
					<Button variant="primary" onClick={onSave} disabled={busy}>
						Save item
					</Button>
				</div>

			</div>
		</div>
	);
}
