<script lang="ts">
	import MarkdownIt from 'markdown-it';
	const md = new MarkdownIt({
		html: true,
		xhtmlOut: true,
		typographer: true,
		breaks: true,
		linkify: true
	});
	import type { Job } from '$lib/model/job';
	import type { CurrentLanguage } from '$lib/types';
	export let job: Job;
	export let currentLanguage: CurrentLanguage = 'it';
	const dialogs: { [k: string]: HTMLDialogElement } = {};
	export let modalOpen: boolean;
</script>

{#each job.images as image}
	<!-- svelte-ignore a11y-click-events-have-key-events -->
	<dialog
		bind:this={dialogs[window.btoa(image)]}
		on:scroll|preventDefault
		on:click={() => {
			dialogs[window.btoa(image)].close();
			modalOpen = false;
		}}
	>
		<img
			src={image}
			alt={image}
			loading="lazy"
			on:scroll={(e) => {
				console.log(e);
			}}
		/>
	</dialog>
{/each}

<div class="job-container">
	<h3>{job.title[currentLanguage]}</h3>
	<div class="image-container">
		{#each job.images as image}
			<!-- svelte-ignore a11y-click-events-have-key-events -->
			<img
				src={image}
				alt={image}
				loading="lazy"
				on:click={() => {
					dialogs[window.btoa(image)].showModal();
					modalOpen = true;
				}}
			/>
		{/each}
	</div>
	<div class="text-content">
		{@html md.render(job.content[currentLanguage])}
	</div>
	<div class="added-info">
		{#if job.year}
			Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
		{/if}
		<div>
			{#if job.collaborators.length != 0}
				Collab:
			{/if}
			{#each job.collaborators as collaborator, index}
				<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
				job.collaborators.length - 1
					? ', '
					: ''}
			{/each}
		</div>
		<div>
			{#if job.languages.length != 0}
				Lang:
			{/if}
			{#each job.languages as language, index}
				{language}{index != job.languages.length - 1 ? ', ' : ''}
			{/each}
		</div>
		<div>
			{#if job.tecnologies.length != 0}
				Tech:
			{/if}
			{#each job.tecnologies as tecnology, index}
				{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
			{/each}
		</div>
	</div>
</div>

<style lang="scss">
	@import '../../app.scss';
	.text-content {
		margin: auto;
		text-align: justify;
	}
	.added-info {
		text-align: left;
		font-size: smaller;
	}
	.job-container {
		width: 100%;
		img {
			background-color: $text-color;
			cursor: zoom-in;
		}
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.hidden {
		display: none;
	}
	.modal {
		display: flex;
		position: fixed;
		position: -webkit-sticky;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba($color: #000000, $alpha: 0.4);
		width: 100%;
		height: 100%;
		justify-content: center;
	}
	.modal-open {
		overflow-y: hidden;
	}
	.modal-closed {
		overflow-y: unset;
	}
	dialog {
		img {
			max-width: 80vw;
			max-height: 80vh;
			height: auto;
			margin: auto;
			background-color: $text-color;
		}
	}
	dialog::backdrop {
		background: rgba(0, 0, 0, 0.3);
	}
	// dialog > div {
	// 	padding: 1em;
	// }
	dialog[open] {
		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	@keyframes zoom {
		from {
			transform: scale(0.95);
		}
		to {
			transform: scale(1);
		}
	}
	dialog[open]::backdrop {
		animation: fade 0.2s ease-out;
	}
	@keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
</style>
