import {Button, Flex, FlexItem, SelectControl} from "@wordpress/components";

export default function MenusHeader({menus, menuId, onMenuChange, onCreateClick, onDeleteClick, busy}) {
	const options = [
		{label: "Select menu…", value: ""},
		...menus.map((m) => ({label: m.name, value: String(m.id)})),
	];

	return (
		<Flex className="jet-menu-header" gap={3} align="center" justify="flex-start">
			<FlexItem style={{minWidth: 360}}>
				<SelectControl
					aria-label="Menu"
					className="jet-menu-header__select-control"
					value={menuId ? String(menuId) : ""}
					options={options}
					onChange={(v) => onMenuChange(Number(v || 0))}
					__next40pxDefaultSize
					__nextHasNoMarginBottom
				/>
			</FlexItem>

			<FlexItem>
				<Button variant="primary" onClick={onCreateClick}>
					Create new menu
				</Button>
			</FlexItem>

			<FlexItem>
				<Button
					variant="secondary"
					isDestructive
					onClick={onDeleteClick}
					disabled={!menuId || busy}
				>
					Delete menu
				</Button>
			</FlexItem>
		</Flex>
	);
}
