<script>
	import html2canvas from 'html2canvas';
	import { title, subtitle, date, address, content, heading } from '$lib/stores/store';

	let newdate = '';
	let inner;

	const convertDateTime = (datetime) => {
		if (datetime == undefined) {
			return {
				date: '',
				time: ''
			};
		}
		const year = datetime.split('-')[0];
		const month = datetime.split('-')[1];
		const day = datetime.split('-')[2].split('T')[0];
		const time = datetime.split('T')[1];
		return {
			date: `${day}/${month}`,
			time: time
		};
	};

	$: if ($date !== '') {
		newdate = convertDateTime($date);
	}

	const takeScreenshot = async () => {
		const res = await html2canvas(inner);
		const image = await res.toDataURL('image/png');
		const link = document.createElement('a');
		link.download = 'cartel.png';
		link.href = image;
		link.click();
	};
</script>

<div class="preview">
	<div class="result" bind:this={inner}>
		<div class="heading">{$heading}</div>
		<div class="title">{$title}</div>
		<div class="subtitle">{$subtitle}</div>
		<div class="content">{@html $content}</div>
		{#if newdate}<div class="date">{newdate.date}</div>{/if}
		{#if newdate}<div class="time">{newdate.time}</div>{/if}
		<div class="address">{$address}</div>
	</div>
	<button on:click|preventDefault={takeScreenshot}>Descargar</button>
</div>

<style>
	.preview {
		padding: 1rem;
		display: grid;
		justify-content: center;
		grid-template-columns: 1fr;
	}

	.result {
		display: block;
		aspect-ratio: 1/1.4142;
		min-height: 842px;
		align-self: center;
		background-color: lightblue;
		width: auto;
		background-image: url('imagen01.png');
		background-size: contain;
		position: relative;
		padding: 1rem;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
		border-radius: 0.5rem;
	}

	.heading {
		position: absolute;
		top: 300px;
		left: 1rem;
		right: 1rem;
		font-size: 1rem;
		color: grey;
		font-variant: small-caps;
	}

	.title {
		position: absolute;
		top: 320px;
		left: 1rem;
		right: 1rem;
		align-self: center;
		font-family: 'Gill Sans', sans-serif;
		font-size: 2.5rem;
		font-variant: small-caps;
		line-height: 2.5rem;
		color: firebrick;
		font-weight: 600;
		height: 5rem;
		overflow: hidden;
	}
	.subtitle {
		position: absolute;
		top: 415px;
		left: 1rem;
		right: 2rem;
		font-size: 1.1rem;
		color: #575;
		height: 2.6rem;
		overflow: hidden;
	}

	.content {
		position: absolute;
		top: 500px;
		left: 1rem;
		right: 16rem;
		font-size: 1rem;
		color: #222;
		line-height: 1.5rem;
		height: 9rem;
		overflow: hidden;
	}

	.date {
		position: absolute;
		top: 600px;
		left: 23rem;
		right: 6rem;
		font-size: 2rem;
		color: white;
		max-height: 2rem;
		overflow: hidden;
	}

	.time {
		position: absolute;
		top: 640px;
		left: 23rem;
		right: 6rem;
		font-size: 1.8rem;
		color: white;
		text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
		max-height: 2rem;
		overflow: hidden;
	}

	.address {
		position: absolute;
		top: 650px;
		left: 2rem;
		right: 15rem;
		font-size: 1.15rem;
		font-family: serif;
		color: firebrick;
		max-height: 4rem;
		overflow: hidden;
	}
</style>
