<script lang="ts">
	import Modal from "./Modal.svelte";
	import { logout, settings, t } from "./app.svelte.js";
	let { open = $bindable(false) } = $props();
</script>

<Modal bind:open title={t("settings")}>
	<div class="grid">
		<div class="sec">
			<h3>{t("general")}</h3>
			<div class="row">
				<span>{t("scrobbling")}</span>
				<input type="checkbox" bind:checked={settings.scrobbling} />
			</div>
			<div class="row">
				<span>{t("replaygain")}</span>
				<select bind:value={settings.replayGainMode}>
					<option value="off">{t("off")}</option>
					<option value="track">{t("track")}</option>
					<option value="album">{t("album")}</option>
				</select>
			</div>
			<div class="row">
				<span>{t("language")}</span>
				<select bind:value={settings.lang}>
					<option value="en">english</option>
					<option value="es">español</option>
				</select>
			</div>
		</div>
		<div class="sec">
			<h3>{t("ui")}</h3>
			<div class="row">
				<span>{t("dynamic_colors")}</span>
				<input type="checkbox" bind:checked={settings.dynamicColors} />
			</div>
			<div class="row">
				<span>{t("dynamic_favicon")}</span>
				<input type="checkbox" bind:checked={settings.dynamicFavicon} />
			</div>
			<div class="row">
				<span>{t("rounded_covers")}</span>
				<input type="checkbox" bind:checked={settings.roundedArt} />
			</div>
			<div class="row">
				<span>{t("transparent_bg")}</span>
				<input type="checkbox" bind:checked={settings.transparentBackgrounds} />
			</div>
			<div class="row">
				<span>{t("transparent_borders")}</span>
				<input type="checkbox" bind:checked={settings.transparentOutlines} />
			</div>
			<div class="row">
				<span>{t("show_queue_stats")}</span>
				<input type="checkbox" bind:checked={settings.showQueueStats} />
			</div>
			<div class="row">
				<span
					>{t("sidebar_width")} (<span class="num"
						>{Math.round(settings.sidebarWidth)}rem</span
					>)</span
				>
				<div class="val">
					<input
						type="range"
						min="16"
						max="48"
						step="1"
						bind:value={settings.sidebarWidth}
					/>
				</div>
			</div>
		</div>
		<div class="sec">
			<h3>{t("table_columns")}</h3>
			<div class="row">
				<span>{t("show_artist")}</span>
				<input type="checkbox" bind:checked={settings.enableArtist} />
			</div>
			<div class="row">
				<span>{t("show_album")}</span>
				<input type="checkbox" bind:checked={settings.enableAlbum} />
			</div>
			<div class="row">
				<span>{t("show_quality")}</span>
				<input type="checkbox" bind:checked={settings.enableQuality} />
			</div>
			<div class="row">
				<span>{t("show_duration")}</span>
				<input type="checkbox" bind:checked={settings.enableDuration} />
			</div>
			<div class="row">
				<span>{t("show_disc")}</span>
				<input type="checkbox" bind:checked={settings.enableDisc} />
			</div>
			<div class="row">
				<span>{t("show_track")}</span>
				<input type="checkbox" bind:checked={settings.enableTrackNum} />
			</div>
			<div class="row">
				<span>{t("show_queue_num")}</span>
				<input type="checkbox" bind:checked={settings.enableQueueNum} />
			</div>
			<div class="row">
				<span>{t("show_favorites")}</span>
				<input type="checkbox" bind:checked={settings.enableFavorites} />
			</div>
			<div class="row">
				<span>{t("show_ratings")}</span>
				<input type="checkbox" bind:checked={settings.enableRatings} />
			</div>
		</div>
		<div class="sec">
			<h3>{t("artwork_sizes")}</h3>
			{#each [{ label: t("artist"), key: "artArtist" }, { label: t("album"), key: "artAlbum" }, { label: t("playlist"), key: "artPlaylist" }, { label: t("song"), key: "artSong" }, { label: t("now_playing"), key: "artNow" }] as { label, key }}
				<div class="row">
					<span
						>{label} (<span class="num"
							>{settings[key as keyof typeof settings]}px</span
						>)</span
					>
					<div class="val">
						<input
							type="range"
							min="0"
							max="192"
							step="8"
							bind:value={settings[key as keyof typeof settings]}
						/>
					</div>
				</div>
			{/each}
		</div>
	</div>
	<button class="logout" onclick={logout}>{t("logout")}</button>
</Modal>

<style>
	h3 {
		border-block-end: 1px solid var(--border-text);
		padding-block-end: 0.25rem;
		margin-block: 0 0.5rem;
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		margin-block-end: 1rem;
	}
	@media (max-width: 32rem) {
		.grid {
			grid-template-columns: 1fr;
		}
	}
	.sec {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}
	.logout {
		inline-size: 100%;
	}
	.val {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.num {
		font-family: monospace;
	}
</style>
