<script>
	import Contact from '$lib/components/contact.svelte';

	let error_box_message = $state('');
	let submitButtonEnable = $state(true);
	let submitButtonText = $derived(submitButtonEnable ? 'Submit' : 'Submitting');

	const formSubmit = async (event) => {
		event.preventDefault();
		submitButtonEnable = false;

		const formData = new FormData(event.target);
		const formObject = Object.fromEntries(formData.entries());

		try {
			let json_to_send = {
				content: `***New Message***\n*Name*: ${formObject.name}\n*Email*: [${formObject.email}](mailto:${formObject.email})\n*Message*: ${formObject.message}`
			};
			const res = await fetch(
				'https://discord.com/api/webhooks/1374798951475187732/zOL9aD1wWn9rCywjqVAy3oUMnzPu25SVIMCDaLD4N8C_V9OqPK8Hj2Wmm-7Ts5QHTbzN',
				{
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(json_to_send)
				}
			);

			if (!res.ok) {
				throw new Error(`Discord webhook error: ${res.status} ${res.statusText}`);
			}
		} catch (err) {
			error_box_message = 'An error has occurred';
			console.error(err);
		}
		submitButtonEnable = true;
	};
</script>

<title>Brock Tomlinson - Contact</title>

<div id="ContactMe">
	<div>
		<h2>Get in Touch</h2>
		<p>
			Please feel free to reach out about questions, opporunities or just want to connect. Feel free
			to either fill out this form or contact me through one of the many of the platforms below
		</p>
	</div>
	<form onsubmit={formSubmit}>
		<label for="name">Name</label>
		<input type="text" id="name" name="name" />

		<label for="email">Email</label>
		<input type="email" id="email" name="email" />

		<label for="message">Message</label>
		<textarea id="message" name="message"></textarea>

		<p>{error_box_message}</p>
		<input
			type="submit"
			disabled={!submitButtonEnable}
			class="submitButton"
			id={submitButtonEnable ? '' : 'disabledSubmitButton'}
		/>
	</form>
</div>
<Contact />

<style>
	#ContactMe {
		display: flex;
		flex-flow: row wrap;
		column-gap: 2svw;
		row-gap: 4svh;
		min-height: 70svh;
		margin-top: 4svh;
		justify-content: space-evenly;
	}

	div div,
	form {
		display: flex;
		flex-grow: 1;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		flex-direction: column;
		justify-content: center;
		margin: 2svh 0.5svw;
		padding: 2svh 1svw;
		max-width: 600px;
	}

	p {
		margin: 2svh 0svw;
		padding: 0svh 0svw;
	}

	input {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.5);
		border-width: 2px;
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
	}

	textarea {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.4);
		border-width: 2px;
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
		min-height: 25svh;
	}

	.submitButton {
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.5);
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
		background-color: rgba(0, 128, 0, 0.6);
		border-color: transparent;
	}

	.submitButton:hover {
		cursor: pointer;
		color: #91a4d2;
		background-color: rgba(0, 150, 0, 0.6);
	}

	#disabledSubmitButton {
		background-color: rgba(211, 211, 211, 0.6);
	}

	#disabledSubmitButton:hover {
		background-color: rgba(180, 180, 180, 0.6);
	}
</style>
