<template>
  <div>
    <video-background
      src="/video/bg-video.mp4"
      poster="/images/poster.png"
      style=" height: 100vh;"
    >
      <div class="container-fluid">
        <div class="row">
          <div
            class="col-12 col-lg-4 bg-img d-none d-lg-block"
            style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;"
          />
          <div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5">
            <div class="row">
              <div class="col-12 py-3 text-center">
                <img src="/images/logo.svg" height="35" class="img " alt="Mindboost Logo">
              </div>
            </div>
            <div class="row mt-lg-0 mt-4" style="height: 90%">
              <div class="col-12 my-auto">
                <div class="text-center pt-4 pt-md-2 col-12 col-md-8 col-xl-8 mx-auto">
                  <h1 class="fw-bolder h3" style="color: #585C5E;">
                    {{ t('Sign up Header') }}
                  </h1>
                  <h2 class="text-muted h5 pt-2">
                    {{ t('Sign up') }}
                  </h2>
                </div>
                <div class="row pt-2">
                  <div class="col-12 col-xl-10 mx-auto">
                    <div v-if="registrationSuccess" class="alert alert-success text-center mx-0 mx-md-4">
                      {{ t('registersuccess') }}
                    </div>
                    <div
                      v-if="registrationError"
                      class="alert alert-danger text-center mx-0 mx-md-4"
                    >
                      {{ registrationErrorMessage }}
                    </div>
                    <form method="POST" @submit.prevent="submitRegister">
                      <!-- Hidden input for the token -->
                      <input type="hidden" name="token" :value="token">
                      <div class="row px-0 px-md-4 pt-3">
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{ t("First Name") }}</label>
                          <input v-model="form.first_name" autocomplete="given-name" type="text" :placeholder="t('Your first name')" class="form-control">
                          <div v-if="errors.first_name" class="invalid-feedback d-block">
                            {{ t(errors.first_name[0]) }}
                          </div>
                        </div>
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{ t("Surname") }}</label>
                          <input v-model="form.surname" autocomplete="family-name" type="text" :placeholder="t('Your surname')" class="form-control">
                          <div v-if="errors.surname" class="invalid-feedback d-block">
                            {{ t(errors.surname[0]) }}
                          </div>
                        </div>
                      </div>
                      <div class="row px-0 px-md-4 pt-3">
                        <div class="col-12 col-md-6 pt-2 col-lg-6 ">
                          <label class="form-label">{{ t("Email") }}</label>
                          <input v-model="form.email" autocomplete="email" type="email" placeholder="alex@mail.com" class="form-control">
                          <div v-if="errors.email" class="invalid-feedback d-block">
                            {{ t(errors.email[0]) }}
                          </div>
                        </div>
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{ t("Password") }}</label>
                          <input v-model="form.password" type="password" autocomplete="new-password" :placeholder="t('Your password')" class="form-control">
                          <div v-if="errors.password" class="invalid-feedback d-block">
                            {{ t(errors.password[0]) }}
                          </div>
                        </div>
                      </div>
                      <div class="row px-md-4 pt-5 pb-2">
                        <div class="col-12 col-md-10">
                          <div class="form-check">
                            <input id="flexCheckIndeterminate" v-model="form.privacy" class="form-check-input" type="checkbox" value="">
                            <label class="form-check-label" for="flexCheckIndeterminate">
                              {{ t("I have read") }}
                              <NuxtLink class="signup-link" :to="localePath('/settings/termsandcondition')">
                                {{ t("Terms & Conditions") }}
                              </NuxtLink>
                              {{ t("and the") }}
                              <NuxtLink class="signup-link" :to="localePath('/settings/dataprotection')">
                                {{ t("Privacy Policy") }}
                              </NuxtLink>
                              {{ t("and accept") }}
                            </label>
                            <div v-if="errors.privacy" class="invalid-feedback d-block">
                              {{ t(errors.privacy[0]) }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row px-0 px-md-4 pt-4">
                        <div class="col">
                          <button :disabled="loading" type="submit" style="min-width:fit-content" class="login-btn col-4">
                            {{ t("Sign up btn") }}
                            <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                              <span class="sr-only">{{ t("Loading...") }}</span>
                            </div>
                          </button>
                          <p class="pt-3">
                            {{ t("Already have an Account?") }} <NuxtLink class="signup-link" :to="localePath('/auth/login')">
                              {{ t("Log in now") }}
                            </NuxtLink>
                          </p>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </video-background>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
import { mapState, mapActions } from 'pinia'
import { ref, watch } from 'vue'
import backgroundImagePath from '~/assets/image/login4.png'
import { useUserStore } from '@/stores/user'

export default {
  name: 'LoGin',
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()

    const route = useRoute() // Get the current route
    const token = ref(route.query.token) // Extract the token from the query parameters

    // Update form token whenever route.query.token changes
    watch(() => route.query.token, (newToken) => {
      token.value = newToken
    })

    return {
      t,
      localePath,
      token
    }
  },
  data () {
    return {
      backgroundImagePath,
      loading: false,
      errors: [],
      registrationSuccess: false,
      registrationError: false,
      registrationErrorMessage: '',
      form: {
        first_name: '',
        surname: '',
        email: '',
        password: '',
        privacy: false,
        token: '',
        language: this.$i18n.locale
      }
    }
  },
  computed: {
    ...mapState(useUserStore, ['user'])
  },
  mounted () {
    if (this.$route.query.error === 'invalid_or_expired_token') {
      this.registrationError = true
      this.registrationErrorMessage = 'Invalid or expired token. Please try again.'
    }
    if (this.$route.query.error === 'verification_failed') {
      this.registrationError = true
      this.registrationErrorMessage = 'Something went wrong. Please try again later.'
    }
  },
  methods: {
    ...mapActions(useUserStore, ['login', 'logout']),

    submitRegister () {
      this.loading = true
      this.errors = []
      // Update form with the token from setup
      this.form.token = this.token

      this.$axios.post('/api/register', this.form)
        .then(({ data }) => {
          // useNuxtApp().$logger.log(data)

          this.loading = false
          this.$toast.success('Signup successful!')
          this.registrationSuccess = true
        })
        .catch((error) => {
          this.loading = false
          if (error.response.status === 422) {
            this.errors = error.response.data.errors
            this.$toast.error(error.response.data.message)
          }
        })
    }
  }
} </script>

<style scoped>
@media only screen and (max-width: 587px) {
  p{
    font-size: 16px !important;
  }
}
</style>
