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

	/** @type {HTMLDivElement} */ let editor;
	let innerHTML;

	const handleSubmit = async () => {
		console.log('submit');
	};

	const getContent = () => {
		if (!editor) {
			console.log('no hay editor');
			return;
		}
		$content = editor.firstChild.innerHTML;
	};

	const quillOptions = {
		modules: {
			toolbar: [['bold', 'italic']]
		},
		theme: 'snow'
	};

	onMount(async () => {
		const { default: Quill } = await import('quill');

		let quill = new Quill(editor, {
			modules: {
				toolbar: quillOptions
			},
			theme: 'snow',
			placeholder: 'contenido'
		});
	});
</script>

<form on:submit|preventDefault={handleSubmit}>
	<div class="form-group">
		<label for="heading">Antetítulo</label>
		<input bind:value={$heading} type="text" name="heading" placeholder="Antetítulo" />
	</div>

	<div clasS="form-group">
		<label for="title">Título</label>
		<input bind:value={$title} type="text" name="title" placeholder="Título" />
	</div>

	<div class="form-group">
		<label for="subtitle">Subtítulo</label>
		<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
	</div>

	<div class="form-group">
		<label for="content">Contenido</label>
		<div id="editor" on:click={getContent}>
			<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
		</div>

		<div class="form-group">
			<label for="date">Fecha</label>
			<input bind:value={$date} type="datetime-local" name="date" />
		</div>

		<div class="form-group">
			<label for="address">Dirección</label>
			<input bind:value={$address} type="text" name="address" />
		</div>
	</div>
</form>

<style>
	.form-group {
		margin: 2rem 0;
	}

	form {
		margin: 1rem;
		display: block;
	}

	input {
		display: block;
		width: 100%;
		font-size: 1rem;
		font-family: monospace;
		padding: 0.5rem;
	}

	label {
		display: block;
		font-size: 1rem;
		font-family: monospace;
		margin: 0.5rem 0;
	}

	#editor {
		background-color: white;
	}
</style>
