import { unref, watch } from 'vue'
import { useI18n } from '/@/hooks/web/useI18n'
import { useTitle as usePageTitle } from '@vueuse/core'
import { useGlobSetting } from '/@/hooks/setting'
import { useRouter } from 'vue-router'
import { useLocaleStore } from '/@/store/modules/locale'

import { REDIRECT_NAME } from '/@/router/constant'

/**
 * Listening to page changes and dynamically changing site titles
 */
export function useTitle() {
    const { title } = useGlobSetting()
    const { t } = useI18n()
    const { currentRoute } = useRouter()
    const localeStore = useLocaleStore()

    const pageTitle = usePageTitle()

    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 },
    )
}
