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

	/** @type {HTMLInputElement} */ let fileinput;

	const onFileSelected = (/** @type {Event} */ e) => {
		let image = e.target.files[0];
		let reader = new FileReader();
		reader.readAsDataURL(image);
		reader.onload = (e) => {
			$colabs = [...$colabs, { image: e.target.result, text: '' }];
		};
	};

	const removecolabs = (/** @type {number} */ index) => {
		if (index > -1) {
			$colabs.splice(index, 1);
			$colabs = $colabs;
		}
	};
</script>

<div class="colabs">
	{#if $colabs[0]}
		{#each $colabs as organization, i}
			<div class="organization">
				<div
					class="remove"
					on:click|preventDefault={() => {
						removecolabs(i);
					}}
				>
					x
				</div>
				<img class="organized-logo" src={organization.image} alt={organization.text} />
				<input class="logo-title" type="text" bind:value={organization.text} />
			</div>
		{/each}
	{/if}
</div>

<button
	on:click|preventDefault={() => {
		fileinput.click();
	}}>Añadir logo</button
>
<input
	style="display:none;"
	type="file"
	accept=".jpg, .jpeg, .png"
	on:change={(e) => onFileSelected(e)}
	bind:this={fileinput}
/>

<style>
	.colabs {
		display: grid;
		grid-template-columns: repeat(5, min-content);
		align-items: center;
		justify-content: center;
	}
	.organization {
		position: relative;
		display: grid;
		grid-template-rows: min-content min-content;
		grid-gap: 0.5rem;
		align-items: center;
		justify-content: center;
		margin: 1rem;
		background-color: #ddd;
		padding: 0.25rem;
	}
	.organized-logo {
		max-height: 64px;
		max-width: 100px;
		margin: 0 auto;
		background-color: #fff;
	}

	.remove {
		position: absolute;
		top: -4px;
		right: -0.25rem;
		color: red;
		cursor: pointer;
		background-color: white;
		padding: 0 0.25rem;
	}

	input {
		display: block;
		max-width: 100px;
	}
	button {
		display: block;
		padding: 0.5rem;
		cursor: pointer;
		margin: 1rem;
	}
</style>
