import { type Accessor, createEffect, createSignal, type Setter, on } from "solid-js";
import type { AppOptions } from "../types";
import "./OptionsModal.css";
import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";

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;

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

	function handleSave() {
		Toastify({
			text: "Saved changes",
			duration: 2000,
			close: true,
			style: { background: "linear-gradient(135deg,rgb(38, 194, 27),rgb(5, 144, 52))" },
		}).showToast();
		props.setOptions(newOptions());
		handleClose();
	}

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

	//TODO: add form elements
	return (
		<dialog ref={dialogElement}>
			<div class="option-content">
				<div class="option-title">Player Options</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="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="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 class="option-buttons">
					<button type="button" onClick={handleSave}>
						Save
					</button>
					<button type="button" class="cancel-button" onClick={handleClose}>
						Cancel
					</button>
				</div>
			</div>
		</dialog>
	);
}