<script>
	import { getMonthName } from '$lib/monthName';
	import { templates } from '$lib/templates/templates';

	/** @type number */ export let templateIndex;
	import { date } from '$lib/stores/store';

	/** @typedef
	 * {{
	 * date: string;
	 * time: string;
	 * }} Newdate
	 */

	/** @type {Newdate} */ let newdate = { date: '', time: '' };

	const convertDateTime = (/** @type {(string | undefined)} */ datetime) => {
		if (datetime == undefined) {
			return {
				date: '',
				time: ''
			};
		}
		const monthNumber = datetime.split('-')[1];
		const day = datetime.split('-')[2].split('T')[0];
		const time = datetime.split('T')[1];
		const month = getMonthName(monthNumber);
		return {
			date: `${day} de ${month}`,
			time: time
		};
	};

	$: if ($date !== '') {
		newdate = convertDateTime($date);
	}
</script>

{#if templates[templateIndex] && newdate.date}
	<div
		class="date"
		style="
    top: {templates[templateIndex].date.top}px;
    height: {templates[templateIndex].date.height}rem;
    left: {templates[templateIndex].date.left}rem;
    right: {templates[templateIndex].date.right}rem;
    color: {templates[templateIndex].date.color};
    font-size: {templates[templateIndex].date.fontSize}rem;
    font-family: {templates[templateIndex].date.fontFamily};
		text-align: {templates[templateIndex].date.textAlign};
		font-weight: {templates[templateIndex].date.fontWeight};
		line-height: {templates[templateIndex].date.lineHeight}rem;
    "
	>
		{newdate.date}
	</div>
{/if}
{#if templates[templateIndex] && newdate.time}
	<div
		class="time"
		style="
    top: {templates[templateIndex].time.top}px;
    height: {templates[templateIndex].time.height}rem;
    left: {templates[templateIndex].time.left}rem;
    right: {templates[templateIndex].time.right}rem;
    color: {templates[templateIndex].time.color};
    font-size: {templates[templateIndex].time.fontSize}rem;
    font-family: {templates[templateIndex].time.fontFamily};
		text-align: {templates[templateIndex].time.textAlign};
		font-weight: {templates[templateIndex].time.fontWeight};
		line-height: {templates[templateIndex].time.lineHeight}rem;
    "
	>
		{newdate.time}
	</div>
{/if}

<style>
	.date {
		position: absolute;
		text-transform: uppercase;
		overflow: hidden;
		display: block;
	}

	.time {
		position: absolute;
		overflow: hidden;
	}
</style>
