import { type Accessor, createEffect, type Setter, on, createSignal, Switch, Match } from "solid-js";
import { FileDisplay, 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";
import { createStore } from "solid-js/store";

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

export default function OptionsModal(props: OptionsModalProps) {
	//clone, otherwise it shares the reference
	const [newOptions, setNewOptions] = createStore<AppOptions>({ ...props.options });
	const [optionsPage, setOptionsPage] = createSignal(1);
	let dialogElement!: HTMLDialogElement;
	let formElement!: HTMLFormElement;

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

	function handleSave(e: Event) {
		e.preventDefault();
		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", credentials: "same-origin" }).catch(() => {});
		if (!response || response.status !== 200) {
			toast("Clearing server cache failed", "error");
		} else {
			toast("Server cache cleared", "info");
		}
	}

	return (
		<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
			<form class="option-content" ref={formElement}>
				<div class="title">Player Options</div>
				<hr />
				<div class="options-page-buttons">
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(1);
						}}
						classList={{ "page-button-active": optionsPage() === 1 }}
					>
						1
					</button>
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(2);
						}}
						classList={{ "page-button-active": optionsPage() === 2 }}
					>
						2
					</button>
					<button
						onClick={(e) => {
							e.preventDefault();
							return setOptionsPage(3);
						}}
						classList={{ "page-button-active": optionsPage() === 3 }}
					>
						3
					</button>
				</div>
				<Switch>
					<Match when={optionsPage() === 1}>
						<div>
							<label for="transcoding-checkbox">Enable transcoding:</label>
							<input
								id="transcoding-checkbox"
								type="checkbox"
								checked={newOptions.enableTranscoding}
								onChange={(e) => setNewOptions("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("disableChunkedTranscoding", e.target.checked)}
								disabled={!newOptions.enableTranscoding}
							/>
						</div>
						<div>
							<label for="bitrate-select">Bitrate:</label>
							<select
								id="bitrate-select"
								value={newOptions.bitrate}
								onChange={(e) => setNewOptions("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("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>
							</select>
						</div>
						<div>
							<label for="max-transcodes-input">Max concurrent transcodes:</label>
							<input
								id="max-transcodes-input"
								type="number"
								min={1}
								required
								value={newOptions.maxTranscodes}
								disabled={!newOptions.enableTranscoding}
								onChange={(e) => setNewOptions("maxTranscodes", e.target.valueAsNumber)}
							/>
						</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("maxDownloads", e.target.valueAsNumber)}
							/>
						</div>
						<div>
							<label for="transcode-covers-checkbox">Transcode covers to avif:</label>
							<input
								id="transcode-covers-checkbox"
								type="checkbox"
								checked={newOptions.transcodeCovers}
								onChange={(e) => setNewOptions("transcodeCovers", e.target.checked)}
							/>
						</div>
					</Match>
					<Match when={optionsPage() === 2}>
						<div>
							<label for="hide-volume-checkbox">Hide volume:</label>
							<input
								id="hide-volume-checkbox"
								type="checkbox"
								checked={newOptions.hideVolume}
								onChange={(e) => setNewOptions("hideVolume", e.target.checked)}
							/>
						</div>
						<div>
							<label for="hide-cover-checkbox">Hide file browser cover:</label>
							<input
								id="hide-cover-checkbox"
								type="checkbox"
								checked={newOptions.hideCover}
								onChange={(e) => setNewOptions("hideCover", e.target.checked)}
							/>
						</div>
						<div>
							<label for="hide-playlist-cover-checkbox">Hide current track cover:</label>
							<input
								id="hide-playlist-cover-checkbox"
								type="checkbox"
								checked={newOptions.hidePlaylistCover}
								onChange={(e) => setNewOptions("hidePlaylistCover", e.target.checked)}
							/>
						</div>
						<div>
							<label for="filebrowser-display-select">Filebrowser:</label>
							<select
								id="filebrowser-display-select"
								value={newOptions.filebrowserDisplay}
								onChange={(e) => setNewOptions("filebrowserDisplay", Number.parseInt(e.target.value))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>
						<div>
							<label for="playlist-display-select">Playlist:</label>
							<select
								id="playlist-display-select"
								value={newOptions.playlistDisplay}
								onChange={(e) => setNewOptions("playlistDisplay", Number.parseInt(e.target.value))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>
						<div>
							<label for="controls-display-select">Current track:</label>
							<select
								id="controls-display-select"
								value={newOptions.controlsDisplay}
								onChange={(e) => setNewOptions("controlsDisplay", Number.parseInt(e.target.value))}
							>
								<option value={FileDisplay.FILENAME}>Filename</option>
								<option value={FileDisplay.TITLE}>Media title</option>
								<option value={FileDisplay.TRACKNO_TITLE}>Track number + Media title</option>
							</select>
						</div>

						<div>
							<label for="font-resolution-select">Font resolution:</label>
							<select
								id="font-resolution-select"
								value={newOptions.fontResolution}
								onChange={(e) => setNewOptions("fontResolution", Number.parseInt(e.target.value))}
							>
								<option value={10}>10px</option>
								<option value={12}>12px</option>
								<option value={16}>16px</option>
							</select>
						</div>
						<div>
							<label for="progress-height-input">Progress bar height:</label>
							<input
								id="progress-height-input"
								type="number"
								min={0}
								required
								value={newOptions.progressBarHeight}
								onChange={(e) => setNewOptions("progressBarHeight", e.target.valueAsNumber)}
							/>
						</div>
					</Match>
					<Match when={optionsPage() === 3}>
						<div>
							<label for="remember-dir-checkbox">Remember last directory:</label>
							<input
								id="remember-dir-checkbox"
								type="checkbox"
								checked={newOptions.rememberDir}
								onChange={(e) => setNewOptions("rememberDir", e.target.checked)}
							/>
						</div>
						<div>
							<label for="duplicate-checkbox">Warn when adding duplicate to playlist:</label>
							<input
								id="duplicate-checkbox"
								type="checkbox"
								checked={newOptions.duplicateWarning}
								onChange={(e) => setNewOptions("duplicateWarning", e.target.checked)}
							/>
						</div>
					</Match>
				</Switch>
				<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>
	);
}