<script>
	import {create_account} from "$shared/lib/api/user";
	import {is_email} from "$shared/lib/helpers";
	import Alert from "$shared/components/alert.svelte";
	import Button from "$shared/components/button.svelte";
	import Tile from "$shared/components/tile.svelte";
	import {link} from "svelte-spa-router";
	import Layout from "./_layout.svelte";

	const signupForm = {
		loading: false,
		values: {
			username: "",
			password: "",
		},
		alert: {
			title: "",
			type: "",
			message: "",
			isVisible: false,
			show(type, obj) {
				signupForm.alert.title = obj.title;
				signupForm.alert.message = obj.text;
				signupForm.alert.type = type;
				signupForm.alert.isVisible = true;
				signupForm.loading = false;
			},
			hide() {
				signupForm.alert.isVisible = false;
				signupForm.alert.title = "";
				signupForm.alert.message = "";
				signupForm.alert.type = "";
			},
		},
		is_valid() {
			return (
				is_email(signupForm.values.username) &&
				signupForm.values.password.length > 0
			);
		},
		async submit_form() {
			if (signupForm.loading) {
				return;
			}
			if (signupForm.is_valid()) {
				signupForm.alert.hide();
				signupForm.loading = true;
				try {
					const response = await create_account(signupForm.values);
					if (response.ok) {
						location.reload();
					} else {
						if (response.data.title || response.data.text) {
							signupForm.alert.show("error", {
								title: response.data.title ?? "",
								text: response.data.text ?? "",
							});
						} else {
							signupForm.alert.show("error", {
								title: "An unknown error occured",
								text: "Try again soon",
							});
						}
					}
				} catch (e) {
					console.error(e);
					signupForm.alert.show("error", {
						title: "An error occured",
						text: "Could not connect to server, please check your internet connection",
					});
				}
			} else {
				signupForm.alert.show("error", {
					title: "Invalid form",
				});
			}
		},
	};
</script>

<Layout>
    <Tile>
        <form on:submit|preventDefault={signupForm.submit_form}
              class="max-width-xxs">
            <fieldset>
                <legend class="form-legend">
                    <span class="margin-bottom-xs">Create your account</span> <br/>
                    <span class="text-sm"
                    >... or <a href="/login"
                               use:link>log in</a></span
                    >
                </legend>
                <div class="margin-bottom-xxs max-width-xxs">
                    <Alert visible={signupForm.alert.isVisible}
                           title={signupForm.alert.title}
                           message={signupForm.alert.message}
                           type={signupForm.alert.type}
                    />
                </div>
                <div class="margin-bottom-xxs">
                    <input type="email"
                           placeholder="Email address"
                           class="form-control width-100%"
                           id="email-address"
                           bind:value={signupForm.values.username}
                    />
                </div>
                <div class="margin-bottom-xxs">
                    <input type="password"
                           placeholder="Password"
                           class="form-control width-100%"
                           bind:value={signupForm.values.password}
                    />
                </div>
                <div class="flex justify-end">
                    <Button class="margin-bottom-xs"
                            text="Submit"
                            type="primary"
                            loading={signupForm.loading}
                    />
                </div>
            </fieldset>
        </form>
    </Tile>
</Layout>
