<template>
  <div class="min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full py-12 px-6">
      <img class="mx-auto h-24 w-auto" src="/favicon.png" alt />
      <h1
        class="sm:text-3xl text-2xl font-medium title-font mb-4 text-center"
      >Lauf für Kaya! - {{ $t('registrieren') }}</h1>
      <p class="mx-auto leading-relaxed text-base text-center">{{ $t('register.register_now') }}</p>
      <p
        v-if="state.org_name !== ''"
        class="mx-auto leading-relaxed text-base text-center"
      >Organization: {{ state.org_name }}</p>
      <p v-else class="mx-auto leading-relaxed text-base text-center">Bürgerlauf</p>
      <div class="mt-4">
        <label for="first_name" class="block font-medium">
          {{ $t('vorname') }}
          <span class="font-bold">*</span>
        </label>
        <input
          v-model="userdetails.firstname"
          name="firstname"
          id="first_name"
          autocomplete="off"
          :placeholder="[[$t('vorname')]]"
          type="text"
          :class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }"
          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <!--  -->
        <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
        <input
          v-model="userdetails.middlename"
          name="middlename"
          id="middle_name"
          autocomplete="off"
          :placeholder="[[$t('mittelname')]]"
          type="text"
          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <!--  -->
        <label for="last_name" class="block font-medium">
          {{ $t('nachname') }}
          <span class="font-bold">*</span>
        </label>
        <input
          v-model="userdetails.lastname"
          name="lastname"
          id="last_name"
          autocomplete="off"
          :placeholder="[[$t('nachname')]]"
          type="text"
          :class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }"
          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <!--  -->
        <label for="email_address" class="block font-medium">
          {{ $t('e_mail_adress') }}
          <span class="font-bold">*</span>
        </label>
        <input
          v-model="userdetails.mail"
          name="email_address"
          id="email_address"
          autocomplete="off"
          :placeholder="[[$t('e_mail_adress')]]"
          type="email"
          :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }"
          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
        <!--  -->
        <label for="phone" class="select-none block font-medium">{{ $t('phone_number') }}</label>
        <input
          v-model="userdetails.phone"
          name="phone"
          id="phone"
          autocomplete="off"
          :placeholder="[[$t('phone_number')]]"
          type="text"
          :class="{ 'border-red-500': (!isMobilePhone(userdetails.phone) && userdetails.phone.trim()), 'border-green-300': (isMobilePhone(userdetails.phone) && userdetails.phone.trim()) }"
          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
        />
        <p
          v-if="(!isMobilePhone(userdetails.phone) && userdetails.phone.trim())"
          class="text-sm"
        >{{ $t('this_is_not_a_valid_international_phone_number') }}</p>
        <!--  -->
        <div class="grid grid-cols-6 mt-6">
          <div class="col-span-6"></div>
          <div class="flex items-start col-span-6">
            <div class="flex items-center h-5">
              <input
                v-model="provide_address"
                id="address_activated"
                name="address_activated"
                type="checkbox"
                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
              />
            </div>
            <div class="ml-3 text-sm">
              <label
                for="address_activated"
                class="font-medium text-gray-400 select-none"
              >{{ $t('provide_address') }}</label>
            </div>
          </div>
          <div v-if="provide_address === true" class="col-span-6">
            <div class="col-span-6">
              <label for="street" class="block font-medium">
                {{ $t('strasse') }}
                <span class="font-bold">*</span>
              </label>
              <input
                v-model="userdetails.address.street"
                type="text"
                name="street"
                :placeholder="[[$t('strasse')]]"
                id="street"
                autocomplete="street-address"
                :class="{ 'border-red-500': (!userdetails.address.street.trim()), 'border-green-300': (userdetails.address.street.trim()) }"
                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <div class="col-span-6">
              <label for="address2" class="block font-medium">{{ $t('apartment_suite_etc') }}</label>
              <input
                v-model="userdetails.address.address2"
                type="text"
                name="address2"
                :placeholder="[[$t('apartment_suite_etc')]]"
                id="address2"
                autocomplete="street-address"
                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <div class="col-span-6 sm:col-span-6 lg:col-span-2">
              <label for="city" class="block font-medium">
                {{ $t('ort') }}
                <span class="font-bold">*</span>
              </label>
              <input
                v-model="userdetails.address.city"
                type="text"
                name="city"
                :placeholder="[[$t('ort')]]"
                id="city"
                :class="{ 'border-red-500': (!userdetails.address.city.trim()), 'border-green-300': (userdetails.address.city.trim()) }"
                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <div class="col-span-6 sm:col-span-3 lg:col-span-2">
              <label for="postal_code" class="block font-medium">
                {{ $t('plz') }}
                <span class="font-bold">*</span>
              </label>
              <input
                v-model="userdetails.address.zipcode"
                type="text"
                name="postal_code"
                :placeholder="[[$t('plz')]]"
                id="postal_code"
                autocomplete="postal-code"
                :class="{ 'border-red-500': (!isPostalCode(userdetails.address.zipcode, 'DE')), 'border-green-300': (isPostalCode(userdetails.address.zipcode, 'DE')) }"
                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
              />
            </div>
            <p
              v-if="!isPostalCode(userdetails.address.zipcode, 'DE')"
              class="text-sm"
            >{{ $t('please_provide_a_valid_zipcode') }}</p>
          </div>
        </div>
        <div class="flex items-start mt-6">
          <div class="flex items-center h-5">
            <input
              v-model="agb_accepted"
              id="agb_accepted"
              name="agb_accepted"
              type="checkbox"
              class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
            />
          </div>
          <div class="ml-3 text-sm">
            <label for="agb_accepted" class="font-medium text-gray-400 select-none">
              {{ $t('i_accept', { tos: $t('tos') }) }}
              <a
                target="_blank"
                rel="noreferrer,noopener"
                href
                class="underline"
              >{{ $t('tos') }}</a>
              {{ $t('i_accept_end') }}
              <span class="font-bold">*</span>
            </label>
          </div>
        </div>
        <div class="mt-6">
          <button
            @click="login"
            :disabled="(!state.submit_enabled)"
            :class="{ 'opacity-50': (!state.submit_enabled), 'cursor-not-allowed': (!state.submit_enabled) }"
            class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
          >{{ $t('registrieren') }}</button>
        </div>
      </div>
      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-900">{{ $t('already_have_an_account') }}</span>
          </div>
        </div>
        <div class="mt-6">
          <a
            href="./login"
            class="block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
          >{{ $t('go_to_login') }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive, defineProps } from "vue";
import axios from "redaxios";
import isEmail from 'validator/es/lib/isEmail';
import isMobilePhone from 'validator/es/lib/isMobilePhone';
import isPostalCode from 'validator/es/lib/isPostalCode';
import { useToast } from "vue-toastification";

const props = defineProps({
  token: String
})
if (props.token) {
  props.token = atob(props.token);
  axios.get(`${config.baseurl}api/organizations/selfservice/${props.token}`)
    .then(({ data }) => {
      console.log(data);
      state.org_name = data.name;
    })
    .catch((error) => {
      console.log(error);
    });
}

let userdetails = ref({ firstname: "", lastname: "", middlename: "", mail: "", phone: "", address: { street: "", address2: "", city: "", zipcode: "" } });
let provide_address = ref(false);
let agb_accepted = ref(false);
// 
const state = reactive({
  org_name: "",
  submit_enabled: computed(() => agb_accepted.value === true && (isMobilePhone(userdetails.value.phone) || !userdetails.value.phone.trim()) && isEmail(userdetails.value.mail)
    && userdetails.value.firstname
    && userdetails.value.lastname && (provide_address.value === false || provide_address.value === true && (userdetails.value.address.street.trim() && userdetails.value.address.city.trim() && isPostalCode(userdetails.value.address.zipcode, "DE"))))
})
const toast = useToast();
function login() {
  userdetails = userdetails.value;
  if (userdetails.phone === "" || isMobilePhone(userdetails.phone)) {
    if (isEmail(userdetails.mail)) {
      let postdata = {
        "email": userdetails.mail,
        "firstname": userdetails.firstname,
        "middlename": userdetails.middlename,
        "lastname": userdetails.lastname,
        "address": {}
      }
      if (isMobilePhone(userdetails.phone)) {
        postdata.phone = userdetails.phone;
      }
      if (provide_address.value === true) {
        postdata.address = {
          address1: userdetails.address.street,
          address2: userdetails.address.address2 || "",
          city: userdetails.address.city,
          postalcode: userdetails.address.zipcode,
          country: "DE",
        }
      }
      toast("registration in progress...");
      axios.post(`${config.baseurl}api/runners/register`, postdata)
        .then(({ data }) => {
          const token = btoa(data.token);
          // const userid = JSON.parse(atob(token.split(".")[1])).id;
          location.replace("../profile/" + token)
          // 
          toast.success("You have been registered!");
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
}
</script>