<template>
  <NuxtLayout name="auth-layout">
    <div class="sign-up sign-up--tabs">
      <div class="sign-up__header">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <a
              class="nav-link"
              id="home-tab"
              data-toggle="tab"
              href="#home"
              role="tab"
              aria-controls="home"
              aria-selected="true"
              @click.prevent="updateComponent('LoginForm')"
              :class="{ active: activeTab === 'LoginForm' }"
              >{{ $t("Login") }}</a
            >
          </li>
          <li class="nav-item" role="presentation">
            <a
              class="nav-link"
              id="profile-tab"
              data-toggle="tab"
              href="#profile"
              role="tab"
              aria-controls="profile"
              aria-selected="false"
              @click.prevent="updateComponent('RegisterForm')"
              :class="{ active: activeTab === 'RegisterForm' }"
              >{{ $t("Register") }}</a
            >
          </li>
        </ul>
      </div>
      <div class="sign-up__content">
        <div class="tab-content" id="myTabContent">
          <div
            class="tab-pane fade show active"
            id="home"
            role="tabpanel"
            aria-labelledby="home-tab"
          >
            <div v-if="loading">
              <component :is="componentName"></component>
            </div>
          </div>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<!-- <script>
import authMixin from "~/mixins/authMixin";

export default {
  // it doest not work!
  // layout: {
  //   default: "auth-layout",
  // },
  mixins: [authMixin],
  // data() {
  //   return {
  //     componentName: "login-form",
  //   };
  // },
};
</script> -->

<!-- <script>
export default {
  layout: "auth-layout",
};
</script> -->

<script setup lang="ts">
definePageMeta({
  layout: false,
});

const componentName = shallowRef(null);
const loading = ref(false);
const activeTab = ref("login");

componentName.value = defineAsyncComponent(
  () => import("~/components/auth/LoginForm.vue")
);

onMounted(() => {
  loading.value = true;
});

const updateComponent = (comName) => {
  activeTab.value = comName;

  componentName.value = defineAsyncComponent(
    () => import(`~/components/auth/${comName}.vue`)
  );
};
</script>
