let lines: CartLine[] = CART_LINES.map((line) => ({ ...line }));

function changeQuantity(event: Event & { currentTarget: HTMLInputElement }) {
	let line = lines.find((candidate) => candidate.id === event.currentTarget.dataset.line);
	if (!line) return;
	line.quantity = Math.max(1, Number(event.currentTarget.value) || 1);
	void handle.update();
}

let totals = cartTotals(lines);

<Button commandfor="cart" command="show-modal">
	<ShoppingCartIcon />
	Cart · {totals.itemCount}
</Button>

<Drawer id="cart" placement="right" aria-labelledby="cart-title">
	<Drawer.Header>
		<Drawer.Title id="cart-title">Your cart</Drawer.Title>
		<Drawer.Description>
			{totals.freeShipping ? "Shipping is on us on this order." : "Spend $150 to get free shipping."}
		</Drawer.Description>
	</Drawer.Header>

	<div
		mix={[
			vstack({ gap: 4, align: "stretch" }),
			// The dock is as tall as the viewport, so everything between the header and the
			// footer scrolls as one column — the checkout button never slides out of reach.
			grow(),
			minBs(0),
			overflowY("auto"),
		]}
	>
		{lines.map((line) => (
			<Item key={line.id}>
				<Item.Content>
					<Item.Title>{line.name}</Item.Title>
					<Item.Description>{line.variant}</Item.Description>
					<div mix={[hstack({ gap: 2, align: "center", justify: "between" }), mbs(1)]}>
						<NumberField.Group mix={[stepper()]}>
							<NumberField.DecrementButton
								command={NUMBER_FIELD_STEP_DOWN_COMMAND}
								commandfor={`cart-quantity-${line.id}`}
								aria-label={`One fewer ${line.name}`}
							/>
							<NumberField.Input
								id={`cart-quantity-${line.id}`}
								name={`quantity[${line.id}]`}
								data-line={line.id}
								min={1}
								max={99}
								value={String(line.quantity)}
								aria-label={`Quantity of ${line.name}`}
								mix={[on<HTMLInputElement, "input">("input", changeQuantity)]}
							/>
							<NumberField.IncrementButton
								command={NUMBER_FIELD_STEP_UP_COMMAND}
								commandfor={`cart-quantity-${line.id}`}
								aria-label={`One more ${line.name}`}
							/>
						</NumberField.Group>
						<span>{formatPrice(line.unitPrice * line.quantity)}</span>
					</div>
				</Item.Content>
			</Item>
		))}

		<Separator />

		<Text>Subtotal</Text>
		<Text>{totals.subtotal}</Text>
		<Text>Shipping</Text>
		<Text>{totals.shipping}</Text>
		<Text>Total</Text>
		<Text>{totals.total}</Text>
	</div>

	<Drawer.Footer>
		<Button commandfor="cart" command="close" variant="outline" color="neutral">
			Keep shopping
		</Button>
		<Button commandfor="cart" command="close">Checkout · {totals.total}</Button>
	</Drawer.Footer>
	<Drawer.Close commandfor="cart" aria-label="Close the cart" />
</Drawer>