import { type Accessor, createEffect, createSignal, type Setter, on } from "solid-js";
import type { AppOptions } from "../types";
import "./OptionsModal.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import { toast } from "../utils";
import { MediaFormat } from "music-server-shared/types";

interface OptionsModalProps {
	showOptions: Accessor<boolean>;
	setShowOptions: Setter<boolean>;
	options: Accessor<AppOptions>;
	setOptions: (options: AppOptions) => void;
}

export default function OptionsModal(props: OptionsModalProps) {
	const [newOptions, setNewOptions] = createSignal<AppOptions>(props.options());
	let dialogElement!: HTMLDialogElement;
	let formElement!: HTMLFormElement;

	createEffect(
		on(props.showOptions, () => {
			if (props.showOptions()) {
				dialogElement.showModal();
				setNewOptions({ ...props.options() });
			}
		}),
	);

	function handleSave() {
		if (!formElement.reportValidity()) return;
		toast("Saved changes", "success");
		props.setOptions(newOptions());
		handleClose();
	}

	function handleClose() {
		dialogElement.close();
		props.setShowOptions(false);
	}

	async function deleteServerCache() {
		const response = await fetch("/reset-cache", { method: "POST" }).catch(() => {});
		if (!response || response.status !== 200) {
			toast("Clearing server cache failed", "error");
		} else {
			toast("Server cache cleared", "info");
		}
	}

	return (
		<dialog ref={dialogElement} onClose={handleClose}>
			<form class="option-content" ref={formElement}>
				<div class="title">Player Options</div>
				<hr />
				<div>
					<label for="remember-dir-checkbox">Remember last directory:</label>
					<input
						id="remember-dir-checkbox"
						type="checkbox"
						checked={newOptions()?.rememberDir}
						onChange={(e) => setNewOptions({ ...newOptions(), rememberDir: e.target.checked })}
					/>
				</div>
				<div>
					<label for="transcoding-checkbox">Enable transcoding:</label>
					<input
						id="transcoding-checkbox"
						type="checkbox"
						checked={newOptions()?.enableTranscoding}
						onChange={(e) => setNewOptions({ ...newOptions(), enableTranscoding: e.target.checked })}
					/>
				</div>
				<div>
					<label for="transcoding-buffer-checkbox">Disable chunked transcoding:</label>
					<input
						id="transcoding-buffer-checkbox"
						type="checkbox"
						checked={newOptions()?.disableChunkedTranscoding}
						onChange={(e) => setNewOptions({ ...newOptions(), disableChunkedTranscoding: e.target.checked })}
					/>
				</div>
				<div>
					<label for="bitrate-select">Bitrate:</label>
					<select
						id="bitrate-select"
						value={newOptions()?.bitrate}
						onChange={(e) =>
							setNewOptions({
								...newOptions(),
								bitrate: Number.parseInt(e.target.value),
							})
						}
						disabled={!newOptions()?.enableTranscoding}
					>
						<option value="32000">32 kbps</option>
						<option value="48000">48 kbps</option>
						<option value="64000">64 kbps</option>
						<option value="96000">96 kbps</option>
						<option value="128000">128 kbps</option>
						<option value="192000">192 kbps</option>
						<option value="320000">320 kbps</option>
					</select>
				</div>
				<div>
					<label for="codec-select">Format:</label>
					<select
						id="codec-select"
						value={newOptions()?.format}
						onChange={(e) =>
							setNewOptions({
								...newOptions(),
								format: e.target.value as MediaFormat,
							})
						}
						disabled={!newOptions()?.enableTranscoding}
					>
						<option>{MediaFormat["opus/ogg"]}</option>
						<option>{MediaFormat["opus/webm"]}</option>
						<option>{MediaFormat.mp3}</option>
						<option>{MediaFormat["vorbis/ogg"]}</option>
						<option>{MediaFormat["vorbis/webm"]}</option>
						<option>{MediaFormat.aac}</option>
					</select>
				</div>
				<div>
					<label for="max-downloads-input">Max concurrent downloads:</label>
					<input
						id="max-downloads-input"
						type="number"
						min={1}
						required
						value={newOptions()?.maxDownloads}
						onChange={(e) => setNewOptions({ ...newOptions(), maxDownloads: e.target.valueAsNumber })}
					/>
				</div>
				<div>
					<label for="max-transcodes-input">Max concurrent transcodes:</label>
					<input
						id="max-transcodes-input"
						type="number"
						min={1}
						required
						value={newOptions()?.maxTranscodes}
						onChange={(e) => setNewOptions({ ...newOptions(), maxTranscodes: e.target.valueAsNumber })}
					/>
				</div>
				<div class="option-buttons">
					<button title="Clear server caches" type="button" class="cache-button" onclick={deleteServerCache}>
						Clear server caches
					</button>
					<button title="Save settings" type="button" onClick={handleSave}>
						Save
					</button>
					<button title="Cancel changes settings" type="button" class="cancel-button" onClick={handleClose}>
						Cancel
					</button>
				</div>
			</form>
		</dialog>
	);
}