import { type Accessor, createEffect, type Setter, on, createSignal, Switch, Match, For } 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 { createStore } from "solid-js/store";
import { MediaContainer, VideoCodec, AudioCodec, VideoEncodingSetting } from "music-server-shared/types";

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

function supportedVideoCodecs(container: MediaContainer) {
	let codecs: VideoCodec[] = [];
	switch (container) {
		case MediaContainer.mp3:
		case MediaContainer.webm:
		case MediaContainer.ogg:
			break;
		case MediaContainer.mp4:
			codecs = [VideoCodec.av1, VideoCodec.h264, VideoCodec.h265, VideoCodec.vp9];
			break;
		default: {
			throw new Error(`Unsupported container: ${container}`);
		}
	}
	return codecs.concat([VideoCodec.none]);
}

function supportedAudioCodecs(container: MediaContainer, forVideo?: boolean) {
	let codecs: AudioCodec[] = [];
	switch (container) {
		case MediaContainer.mp3:
			codecs = [AudioCodec.mp3];
			break;
		case MediaContainer.webm:
			codecs = [AudioCodec.opus, AudioCodec.vorbis];
			break;
		case MediaContainer.ogg:
			codecs = [AudioCodec.opus, AudioCodec.vorbis];
			break;
		case MediaContainer.mp4:
			codecs = [AudioCodec.mp3];
			if (forVideo) codecs.push(AudioCodec.opus, AudioCodec.aac); //ffmpeg generates garbage if opus or aac is used in mp4 without video
			break;
		default: {
			throw new Error(`Unsupported container: ${container}`);
		}
	}
	return codecs;
}

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;

	//update to valid codecs on video container change
	createEffect(() => {
		const suportedVideo = supportedVideoCodecs(newOptions.videoSettings.container);

		if (!suportedVideo.includes(newOptions.videoSettings.videoCodec)) {
			setNewOptions("videoSettings", "videoCodec", suportedVideo[0]);
		}
		const suportedAudio = supportedAudioCodecs(
			newOptions.videoSettings.container,
			newOptions.videoSettings.videoCodec !== VideoCodec.none,
		);
		if (!suportedAudio.includes(newOptions.videoSettings.audioCodec)) {
			setNewOptions("videoSettings", "audioCodec", suportedAudio[0]);
		}
	});

	//update to valid codecs on audio container change
	createEffect(() => {
		const suportedAudio = supportedAudioCodecs(newOptions.audioSettings.container, false);
		if (!suportedAudio.includes(newOptions.audioSettings.audioCodec)) {
			setNewOptions("audioSettings", "audioCodec", suportedAudio[0]);
		}
	});

	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>
					{newOptions.enableTranscoding && (
						<button
							onClick={(e) => {
								e.preventDefault();
								return setOptionsPage(4);
							}}
							classList={{ "page-button-active": optionsPage() === 4 }}
						>
							4
						</button>
					)}
					{newOptions.enableTranscoding && (
						<button
							onClick={(e) => {
								e.preventDefault();
								return setOptionsPage(5);
							}}
							classList={{ "page-button-active": optionsPage() === 5 }}
						>
							5
						</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="language-input">Language preference:</label>
							<input
								id="language-input"
								type="text"
								value={newOptions.languages}
								onChange={(e) => setNewOptions("languages", e.target.value)}
								disabled={!newOptions.enableTranscoding}
							/>
						</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="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>
					</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="mse-checkbox">Allow Media Source Extensions (MSE):</label>
							<input
								id="mse-checkbox"
								type="checkbox"
								checked={newOptions.useMSE}
								onChange={(e) => setNewOptions("useMSE", e.target.checked)}
							/>
						</div>
						<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>
						<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() === 4}>
						<div style={{ "font-size": "1.2rem" }} class="title">
							Transcoding settings for videos
						</div>
						<div>
							<label for="container-select">Container:</label>
							<select
								id="container-select"
								value={newOptions.videoSettings.container}
								onChange={(e) => setNewOptions("videoSettings", "container", e.target.value as MediaContainer)}
							>
								<For each={Object.values(MediaContainer)}>
									{(format) => {
										return <option value={format}>{format}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="video-codec-select">Video codec:</label>
							<select
								id="video-codec-select"
								value={newOptions.videoSettings.videoCodec}
								onChange={(e) => setNewOptions("videoSettings", "videoCodec", e.target.value as VideoCodec)}
							>
								<For each={supportedVideoCodecs(newOptions.videoSettings.container)}>
									{(codec) => {
										return <option value={codec}>{codec}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="video-settings-select">Video encoding settings:</label>
							<select
								id="video-settings-select"
								value={newOptions.videoSettings.videoEncodingSetting}
								onChange={(e) =>
									setNewOptions("videoSettings", "videoEncodingSetting", e.target.value as VideoEncodingSetting)
								}
							>
								<For each={Object.values(VideoEncodingSetting)}>
									{(setting) => {
										return <option value={setting}>{setting}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="video-bitrate-select">Video bitrate:</label>
							<select
								id="video-bitrate-select"
								value={newOptions.videoSettings.videoBitrate}
								onChange={(e) => setNewOptions("videoSettings", "videoBitrate", Number.parseInt(e.target.value))}
							>
								<option value="210000">210 kbps</option>
								<option value="420000">420 kbps</option>
								<option value="720000">720 kbps</option>
								<option value="1500000">1.5 Mbps</option>
								<option value="3000000">3 Mbps</option>
								<option value="4000000">4 Mbps</option>
								<option value="6000000">6 Mbps</option>
								<option value="8000000">8 Mbps</option>
								<option value="10000000">10 Mbps</option>
								<option value="15000000">15 Mbps</option>
								<option value="20000000">20 Mbps</option>
								<option value="30000000">30 Mbps</option>
								<option value="40000000">40 Mbps</option>
							</select>
						</div>

						<div>
							<label for="audio-codec-select">Audio codec:</label>
							<select
								id="audio-codec-select"
								value={newOptions.videoSettings.audioCodec}
								onChange={(e) => setNewOptions("videoSettings", "audioCodec", e.target.value as AudioCodec)}
							>
								<For
									each={supportedAudioCodecs(
										newOptions.videoSettings.container,
										newOptions.videoSettings.videoCodec !== VideoCodec.none,
									)}
								>
									{(codec) => {
										return <option value={codec}>{codec}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="audio-bitrate-select">Audio bitrate:</label>
							<select
								id="audio-bitrate-select"
								value={newOptions.videoSettings.audioBitrate}
								onChange={(e) => setNewOptions("videoSettings", "audioBitrate", Number.parseInt(e.target.value))}
							>
								<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>
					</Match>
					<Match when={optionsPage() === 5}>
						<div style={{ "font-size": "1.2rem" }} class="title">
							Transcoding settings for music
						</div>
						<div>
							<label for="container-select">Container:</label>
							<select
								id="container-select"
								value={newOptions.audioSettings.container}
								onChange={(e) => setNewOptions("audioSettings", "container", e.target.value as MediaContainer)}
							>
								<For each={Object.values(MediaContainer)}>
									{(format) => {
										return <option value={format}>{format}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="audio-codec-select">Audio codec:</label>
							<select
								id="audio-codec-select"
								value={newOptions.audioSettings.audioCodec}
								onChange={(e) => setNewOptions("audioSettings", "audioCodec", e.target.value as AudioCodec)}
							>
								<For each={supportedAudioCodecs(newOptions.audioSettings.container)}>
									{(codec) => {
										return <option value={codec}>{codec}</option>;
									}}
								</For>
							</select>
						</div>
						<div>
							<label for="audio-bitrate-select">Audio bitrate:</label>
							<select
								id="audio-bitrate-select"
								value={newOptions.audioSettings.audioBitrate}
								onChange={(e) => setNewOptions("audioSettings", "audioBitrate", Number.parseInt(e.target.value))}
							>
								<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>
					</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>
	);
}