<script>
  import { createForm } from "svelte-forms-lib";
  import * as yup from "yup";
  import api from "../utilities/api";
  import { navigate } from "svelte-routing";
  import { getNotificationsContext } from "svelte-notifications";
  import notificationObject from "../utilities/notification";
  const { addNotification } = getNotificationsContext();
  import { authenticationToken } from "../stores.js";

  const { form, errors, state, handleChange, handleSubmit } = createForm({
    initialValues: {
      email: "",
      password: "",
      password_confirmation: "",
    },
    validationSchema: yup.object().shape({
      email: yup.string().email().required(),
      password: yup.string().required(),
      password_confirmation: yup
        .string()
        .oneOf([yup.ref("password"), null], "Passwords must match"),
    }),
    onSubmit: (values) => {
      addNotification(
        notificationObject({
          text: "Signing you up ...",
        })
      );

      api()
        .post("/users", { user: values })
        .then((response) => {
          authenticationToken.set(response.headers.authorization);
          addNotification(
            notificationObject({
              text: "Successfully logged in",
              type: "success",
            })
          );
          navigate("/", { replace: true });
        })
        .catch(() => {
          addNotification(
            notificationObject({
              text:
                "An error has happened while trying to sign you up. Please try again later.",
              type: "danger",
            })
          );
        });
    },
  });
</script>

<div class="colums">
  <div class="column is-4 is-offset-one-quarter">
    <h1 class="title">Sign Up</h1>
    <p>We're happy to welcome you to MegaMeme</p>
    <br />

    <form on:submit={handleSubmit}>
      <div class="field">
        <label class="label" for="email">E-Mail</label>
        <div class="control has-icons-left has-icons-right">
          <input
            class="input is-failure"
            id="email"
            name="email"
            type="email"
            on:change={handleChange}
            on:blur={handleChange}
            bind:value={$form.email}
          />
          {#if $errors.name}
            <small>{$errors.email}</small>
          {/if}
        </div>
      </div>

      <div class="field">
        <label class="label" for="password">Password</label>
        <input
          class="input is-failure"
          id="password"
          name="password"
          type="password"
          on:change={handleChange}
          on:blur={handleChange}
          bind:value={$form.password}
        />
        {#if $errors.password}
          <small>{$errors.password}</small>
        {/if}
      </div>

      <div class="field">
        <label class="label" for="password_confirmation"
          >Password confirmation</label
        >
        <input
          class="input is-failure"
          id="password_confirmation"
          name="password_confirmation"
          type="password"
          on:change={handleChange}
          on:blur={handleChange}
          bind:value={$form.password_confirmation}
        />
        {#if $errors.password_confirmation}
          <small>{$errors.password_confirmation}</small>
        {/if}
      </div>

      <button type="submit">Register</button>
    </form>
  </div>
</div>
<br />
<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>MegaMeme</strong> | Copyright &#169; 2021 by L.Ceriani, A.Pfister &#38;
      M.Brändli
    </p>
  </div>
</footer>
