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

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

	/** @type {string} */ let newdate;

	/**
	 * @param {string} date - Fecha del evento
	 * @returns {string} - Fecha en dia (número) mes (letras)
	 */
	const convertDate = (date) => {
		if (date == undefined) {
			return '';
		}
		/** @type {string} */ const monthNumber = date.split('-')[1];
		/** @type {string} */ let day = date.split('-')[2].split('T')[0];
		/** @type {number} */ const dayNumber = Number(day);
		/** @type {string} */ const month = getMonthName(monthNumber);

		/** Removes 0 on single digit days */
		if (dayNumber < 10) {
			day = day.charAt(1);
		}

		/** @type {string} */ const res = `${day} ${month}`;
		return res;
	};

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

{#if templates[templateIndex] && newdate}
	<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}
	</div>
{/if}

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