<script lang="ts">
import { superForm } from "sveltekit-superforms/client";
import type { PageData } from "./$types";
import { writable } from "svelte/store";
import SuperDebug from "sveltekit-superforms/client/SuperDebug.svelte";
import PlusMinusBtn from "../../../components/PlusMinusBtn.svelte";
export let data: PageData;
const { form, constraints, enhance } = superForm(data.form, {
taintedMessage: null,
});
let userInputStore = writable([{ name: "user1", id: 1 }]);
function addUserToStore() {
let lastId = $userInputStore[$userInputStore.length - 1].id;
if (lastId < 6) {
$userInputStore = [
...$userInputStore,
{ name: `user${++lastId}`, id: lastId },
];
}
}
function removeUserToStore() {
let lastId = $userInputStore[$userInputStore.length - 1].id;
if (lastId !== 1) {
$userInputStore = [
...$userInputStore.filter((obj) => obj.id !== lastId),
];
}
}
</script>
<svelte:head>
<title>House Creation</title>
</svelte:head>
<div class="flex flex-col items-center border-opacity-50">
<div class="prose">
<form method="post">
<div class="form-control join-vertical gap-4">
<input
bind:value={$form.name}
class="input input-bordered w-full max-w-xs join-item"
type="text"
name="houseName"
placeholder="House name"
{...$constraints.name}
/>
<PlusMinusBtn
plusFn={addUserToStore}
minusFn={removeUserToStore}
/>
{#each $userInputStore as user, index}
<input
bind:value={$form.mates[index]}
class="input input-bordered w-full max-w-xs join-item"
type="email"
name={user.name}
id={user.id.toString()}
placeholder={`Mate ${user.id} email`}
{...$constraints.mates}
/>
{/each}
<button class="btn join-item btn-primary">Create House</button>
</div>
<div class="divider">OR</div>
</form>
<p>
Click <button
on:click={() =>
document.getElementById("modalHouseCode")?.showModal()}
><u><b>here</b></u></button
> to enter in an existing house
</p>
<dialog id="modalHouseCode" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Enter an house code</h3>
<br />
<div class="flex flex-col items-center">
<input
class="input input-bordered input-secondary w-full max-w-xs"
type="text"
name="houseCode"
placeholder="House code"
required
/>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
<SuperDebug data={$form} />
</div>
</div>