"use client";
import { useRef } from "react";
import { GearIcon } from "@radix-ui/react-icons";
import { SettingsIcon, Volume2 } from "lucide-react";

export const SettingsBtn = () => {
	const modalRef = useRef<HTMLDialogElement>(null);

	return (
		<div>
			<button
				className="btn btn-ghost"
				onSubmit={() => false}
				onClick={() => {
					modalRef.current?.showModal();
				}}
			>
				<GearIcon className="w-5 h-5" />
			</button>

			<dialog ref={modalRef} className="modal">
				<div className="modal-box">
					<h3 className="flex items-center gap-2 text-lg font-bold mb-5">
						<SettingsIcon size={20} /> Einstellungen
					</h3>
					<div className="flex flex-col items-center justify-center">
						<fieldset className="fieldset w-full">
							<label className="floating-label w-full text-base">
								<span>Eingabegerät</span>
								<select className="input w-full" defaultValue={0}>
									<option key={0} value={0} disabled>
										Bitte wähle ein Eingabegerät...
									</option>
									<option key={1} value={1}>
										Audiogerät 1
									</option>
									<option key={2} value={2}>
										Audiogerät 2
									</option>
									<option key={3} value={3}>
										Audiogerät 3
									</option>
								</select>
							</label>
						</fieldset>
						{/* FÜGE HIER BITTE DEN MIKROFONAUSSCHLAG EIN WIE IN DER V1 */}
						<div className="divider w-full" />
					</div>
					<p className="flex items-center gap-2 text-base mb-2">
						<Volume2 size={20} /> Ausgabelautstärke
					</p>
					<div className="w-full">
						<input
							type="range"
							min={0}
							max={100}
							defaultValue={40}
							className="range range-xs range-accent w-full"
						/>
						<div className="flex justify-between px-2.5 mt-2 text-xs">
							<span>0</span>
							<span>25</span>
							<span>50</span>
							<span>75</span>
							<span>100</span>
						</div>
					</div>

					<div className="flex justify-between modal-action">
						<button
							className="btn btn-soft"
							type="submit"
							onSubmit={() => false}
							onClick={() => {
								modalRef.current?.close();
							}}
						>
							Schließen
						</button>
						<button
							className="btn btn-soft btn-success"
							type="submit"
							onSubmit={() => false}
							onClick={() => {
								modalRef.current?.close();
							}}
						>
							Speichern
						</button>
					</div>
				</div>
			</dialog>
		</div>
	);
};

export const Settings = () => {
	return (
		<div>
			<SettingsBtn />
		</div>
	);
};