<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import axios from 'axios'
import {API_URL} from "@/main.js";
import { parseError, errors, clearErrors, addError, getError } from "@/components/request/HandleGlobalError.vue";
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const customer_number = ref();
const password = ref('');
const error = ref('');

const store = useStore();
const router = useRouter();

const login = async () => {
  try {
    const response = await axios.post(API_URL + '/auth/login', {
      customer_number: customer_number.value,
      password: password.value,
      g_recaptcha_response: reCAPTCHA_data.value.enabled ? grecaptcha.getResponse() : null,
    });
    // Save the token in the local storage
    localStorage.setItem('token', response.data.data.token);
    window.location.reload();
  } catch (e) {
    parseError(e, 'auth');
  }
};

const doNothing = () => {
  // Do nothing
};

const reCAPTCHA_data = ref({
  enabled: false,
  site_key: '',
});

const ratelimit_data = ref({
  enabled: false,
  limit: 0,
  remaining: 0,
  reset: 0,
  warning: null,
});

SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
  console.log(response.data.data);
  reCAPTCHA_data.value = response.data.data.recaptcha;
  ratelimit_data.value = response.data.data.rate_limit;
  // If the reCAPTCHA is enabled, load the reCAPTCHA script
  if (reCAPTCHA_data.value.enabled) {
    const script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
});

</script>

<template>
  <form @submit.prevent="doNothing">
    <div class="field">
      <label class="label">Customer Number</label>
      <div class="control">
        <input class="input" type="text" v-model="customer_number" />
      </div>
    </div>
    <div class="field">
      <label class="label">Password</label>
      <div class="control">
        <input class="input" type="password" v-model="password" />
      </div>
    </div>
    <!-- reCaptcha, if enabled -->
    <div class="field mt-6" v-if="reCAPTCHA_data.enabled">
      <div class="control">
        <div class="g-recaptcha" :data-sitekey="reCAPTCHA_data.site_key"></div>
      </div>
    </div>
    <!-- Display the error -->
    <div class="field">
      <p class="help is-danger" v-if="getError('auth')">
        {{ getError('auth') }}
      </p>
    </div>
    <div class="field">
      <div class="control">
        <LoadButtonWhileAwait :loadFunction="login" class="button is-dark is-fullwidth" id="login-button">Login</LoadButtonWhileAwait>
      </div>
    </div>
    <div class="field">
      <div class="control">
        <button class="button is-text" @click="router.push('/admin/login')">Truck Wash vognvasker login</button>
      </div>
    </div>
  </form>
</template>