<script setup>
import { RouterView } from 'vue-router'
import {computed, onMounted} from "vue";
import {useRefresh} from "@/composables/auth";
import {useCompanyInfo} from "@/composables/company";
import {useLanguages} from "@/composables/languages/index.js";
import BaseHeader from "@/components/base/header/base-header.vue";
import BaseFooter from "@/components/base/base-footer.vue";
import BaseAuth from "@/components/base/base-auth.vue";
import LoginForm from "@/components/forms/login-form.vue";
import RegisterForm from "@/components/forms/register-form.vue";
import NewPasswordForm from "@/components/forms/new-password-form.vue";
import ResetPasswordForm from "@/components/forms/reset-password-form.vue";
import {useAppStore} from "@/stores/app.js";

const appStore = useAppStore()

const activeState = computed(() => appStore.activeState)

const { refresh } = useRefresh();
const { getCompanyInfo } = useCompanyInfo();
const { getLanguages } = useLanguages();

onMounted(async () => {
  await refresh()
  await getCompanyInfo()
  await getLanguages()

  setInterval(async () => {
    await refresh()
  }, 600000)
})
</script>

<template>
  <main class="main" id="top">
    <base-header />
    <Transition name="opacity" mode="out-in">
      <base-auth v-if="activeState">
        <login-form v-if="activeState === 'login'" />
        <register-form v-if="activeState === 'register'" />
        <reset-password-form v-if="activeState === 'reset-password'" />
        <new-password-form v-if="activeState === 'new-password'" />
      </base-auth>
    </Transition>
    <RouterView v-slot="{ Component }">
      <Transition name="opacity" mode="out-in">
        <component :is="Component" />
      </Transition>
    </RouterView>
    <base-footer />
  </main>
</template>

<style scoped>
.main {
  padding-top: 90px;
  background-color: #f7f7f7;
}

:deep(.el-skeleton__item) {
  --el-skeleton-color: #d0d2d3 !important;
  --el-skeleton-to-color: #b4b4b7 !important;
}
</style>
