<script setup>
const config = useRuntimeConfig()

definePageMeta({
  middleware: ['guest']
})

const router = useRouter()

const form = reactive({
  activated: true,
  authorities: [
    'ROLE_USER'
  ],
  firstName: '',
  lastName: '',
  email: '',
  login: '',
  password: '',
  imageUrl: '',
  langKey: 'en'
})

const showPassword = ref(false)

const submit = async () => {
  const user = await $fetch('/api/auth/register', {
    method: 'POST',
    body: {
      activated: form.activated,
      authorities: form.authorities,
      email: form.email,
      login: form.login,
      password: form.password,
      imageUrl: form.imageUrl,
      langKey: form.langKey
    }
  })

  if(user.isRegistered) {
    location.href = '/verify-email'
  }
}
</script>

<template>
  <NuxtLayout name="auth">
    <!-- Login -->
    <div class="card">
            <div class="card-body">
              <!-- Logo -->
              <div class="app-brand justify-content-center mb-4 mt-2">
                <a href="index.html" class="app-brand-link gap-2">
                  <span class="app-brand-logo demo">
                    <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                        fill="#7367F0" />
                      <path
                        opacity="0.06"
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
                        fill="#161616" />
                      <path
                        opacity="0.06"
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
                        fill="#161616" />
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                        fill="#7367F0" />
                    </svg>
                  </span>
                  <span class="app-brand-text demo text-body fw-bold ms-1">{{ config.public.solutionname }}</span>
                </a>
              </div>
              <!-- /Logo -->
              <h4 class="mb-1 pt-2 textAlign-center">Register</h4>
              <p class="mb-4 textAlign-center">Don't have any account yet?</p>

              <form id="formAuthentication" class="mb-3" @submit.prevent="submit">
                <div class="d-flex gap-1rem">
                  <div class="mb-3 w-100pct sr:50pct">
                    <label for="firstName" class="form-label">First Name *</label>
                    <input
                      type="text"
                      v-model="form.firstName"
                      class="form-control"
                      id="firstName"
                      name="first-name"
                      placeholder="Your first name"
                      required />
                  </div>
                  <div class="mb-3 w-100pct sr:50pct">
                    <label for="lastName" class="form-label">Last Name *</label>
                    <input
                      type="text"
                      v-model="form.lastName"
                      class="form-control"
                      id="lastName"
                      name="last-name"
                      placeholder="Your last name"
                      required />
                  </div>
                </div>
                <div class="mb-3">
                  <label for="username" class="form-label">Username *</label>
                  <input
                    type="text"
                    v-model="form.login"
                    class="form-control"
                    id="username"
                    name="login-username"
                    placeholder="Your username or login ID"
                    autofocus
                    required />
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">Email *</label>
                  <input
                    type="email"
                    v-model="form.email"
                    class="form-control"
                    id="email"
                    name="email-username"
                    placeholder="Enter your email"
                    required />
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">Password *</label>
                  <div class="input-group input-group-merge">
                    <input
                      :type="showPassword ? 'text' : 'password'"
                      v-model="form.password"
                      id="password"
                      class="form-control"
                      name="password"
                      :placeholder="showPassword ? 'Enter your password' : '&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;'"
                      aria-describedby="password"
                      required />
                    <span class="input-group-text cursor-pointer" @click="showPassword = !showPassword"><i :class="`ti ti-eye${showPassword ? '-off' : ''}`"></i></span>
                  </div>
                </div>
                <div class="mb-3">
                  <button class="btn btn-primary d-grid w-100" type="submit">Sign up</button>
                </div>
              </form>

              <p class="text-center">
                <span>Already have an account?</span>
                <NuxtLink href="/login">
                  <span> Sign in here</span>
                </NuxtLink>
              </p>

              <div class="divider my-4">
                <div class="divider-text">or</div>
              </div>

              <div class="d-flex justify-content-center">
                <a href="javascript:;" class="btn btn-icon btn-label-facebook me-3">
                  <i class="tf-icons fa-brands fa-facebook-f fs-5"></i>
                </a>

                <a href="javascript:;" class="btn btn-icon btn-label-google-plus me-3">
                  <i class="tf-icons fa-brands fa-google fs-5"></i>
                </a>

                <a href="javascript:;" class="btn btn-icon btn-label-twitter">
                  <i class="tf-icons fa-brands fa-twitter fs-5"></i>
                </a>
              </div>
            </div>
          </div>
          <!-- /Register -->
  </NuxtLayout>
</template>