let settings = { ...BUILD_DEFAULTS };

function editSetting(field: keyof typeof BUILD_DEFAULTS) {
	return on<HTMLInputElement, "input">("input", (event) => {
		settings[field] = event.currentTarget.value;
		void handle.update();
	});
}

function resetDefaults() {
	settings = { ...BUILD_DEFAULTS };
	void handle.update();
}

<Disclosure open>
	<Disclosure.Trigger>
		<Disclosure.Header mix={[grow()]}>Advanced build settings</Disclosure.Header>
		<ChevronDownIcon data-slot="icon" aria-hidden="true" />
	</Disclosure.Trigger>
	<Disclosure.Panel>
		<Description>
			Overrides apply to this project only. Leave them alone to keep the detected defaults.
		</Description>

		<Label htmlFor="buildCommand">Build command</Label>
		<Input id="buildCommand" name="buildCommand" value={settings.command} mix={[editSetting("command")]} />

		<Label htmlFor="outputDirectory">Output directory</Label>
		<Input id="outputDirectory" name="outputDirectory" value={settings.output} mix={[editSetting("output")]} />

		<Label htmlFor="installCommand">Install command</Label>
		<Input id="installCommand" name="installCommand" value={settings.install} mix={[editSetting("install")]} />

		<Switch name="buildCache" defaultChecked>Reuse the build cache between deploys</Switch>

		<Button
			variant="outline"
			color="neutral"
			size="sm"
			mix={[on<HTMLButtonElement, "click">("click", resetDefaults)]}
		>
			Reset to defaults
		</Button>
	</Disclosure.Panel>
</Disclosure>