<script lang="ts">
	import {
		activeUser,
		baseHue,
		groupByStamps,
		pageIcon,
		pageTitle,
		sortBy,
		validSortOptions
	} from '$lib/stores.svelte';
	import { onMount } from 'svelte';
	import Checkbox from '../../components/Checkbox.svelte';
	import ColorPicker from '../../components/ColorPicker.svelte';
	import DateFormatBuilder from '../../components/DateFormatBuilder.svelte';
	import Select from '../../components/Select.svelte';
	import SettingsLine from './SettingsLine.svelte';
	import SubscriptionSettings from './SubscriptionSettings.svelte';

	onMount(async () => {
		$pageTitle = 'Settings';
		$pageIcon = 'si:settings-cute-line';
	});
</script>

<SettingsLine title="Your Nostr Public Key">
	<code>{$activeUser?.npub}</code>
</SettingsLine>

<SettingsLine title="Email Alias Time Blocks">
	<SubscriptionSettings />
</SettingsLine>

<SettingsLine title="Sorting and Grouping">
	<Checkbox bind:checked={$groupByStamps} label="Group by stamps" />
	<Select
		bind:value={$sortBy}
		label="Sort by"
		options={validSortOptions.map((o) => ({
			value: o,
			label: o.charAt(0).toUpperCase() + o.slice(1).toLowerCase()
		}))}
	/>
</SettingsLine>

<SettingsLine title="Date and Time">
	<DateFormatBuilder />
</SettingsLine>

<SettingsLine title="Base Color">
	<ColorPicker bind:value={$baseHue} />
</SettingsLine>
