<script>
	import { dateFormat, timeFormat } from '$lib/stores.svelte';
	import { getReadableDate, getReadableTime } from '$lib/utils.svelte';

	let previewDate = $state(getReadableDate(new Date()));
	let previewTime = $state(getReadableTime(new Date()));

	dateFormat.subscribe((v) => {
		if (v === '') {
			$dateFormat = 'y-m-d';
			return;
		}
		previewDate = getReadableDate(new Date());
	});

	timeFormat.subscribe((v) => {
		if (v === '') {
			$timeFormat = 'h:m:s';
			return;
		}
		previewTime = getReadableTime(new Date());
	});
</script>

<div class="format-container">
	<div class="format-group">
		<label>Date Format</label>
		Available format letters:
		<ul>
			<li><b>y</b>: year (2024)</li>
			<li><b>m</b>: month (01-12)</li>
			<li><b>d</b>: day (01-31)</li>
		</ul>
		<input
			bind:value={$dateFormat}
			placeholder="y-m-d"
			type="text"
		/>
		<div class="preview">Preview: {previewDate}</div>
	</div>

	<div class="format-group">
		<label>Time Format</label>
		Available format letters:
		<ul>
			<li><b>h</b>: hour (00-23 or 01-12 if 'a' is used)</li>
			<li><b>m</b>: minute (00-59)</li>
			<li><b>s</b>: second (00-59)</li>
			<li><b>a</b>: adds AM/PM and switches to 12h format</li>
		</ul>
		<input
			bind:value={$timeFormat}
			placeholder="h:m:s"
			type="text"
		/>
		<div class="preview">Preview: {previewTime}</div>
	</div>
</div>

<style>
  li {
    list-style: none;
  }

  .format-container {
    display: flex;
    gap: 2rem;
    padding: 1rem;
  }

  .format-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  label {
    font-weight: bold;
  }

  .preview {
    font-size: 0.9rem;
    font-style: italic;
  }
</style>
