import { useI18n } from '@eciol/locale';
import { getAppEnvConfig, REDIRECT_NAME } from '@eciol/shared';
import { useLocaleStore } from '@eciol/store';
import { useTitle } from '@vueuse/core';
import { unref, watch } from 'vue';
import { useRouter } from 'vue-router';

/**
 * Listening to page changes and dynamically changing site titles
 */
export function usePageTitle() {
  const { VITE_GLOB_APP_TITLE: title } = getAppEnvConfig();
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const localeStore = useLocaleStore();

  const pageTitle = useTitle();

  watch(
    [() => currentRoute.value.path, () => localeStore.getLocale],
    () => {
      const route = unref(currentRoute);

      if (route.name === REDIRECT_NAME) {
        return;
      }

      const tTitle = t(route?.meta?.title as string);
      pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
    },
    { immediate: true },
  );
}