import { t } from '@/i18n'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useColorMode, type ColorModePreference } from '@/composables/useColorMode'
import { accountInitials, accountName } from '@/lib/accountName'

const PROFILE_PATH = '/profile'

export const colorModeOptions: { label: string; value: ColorModePreference }[] = [
	{
		get label() {
			return t('System')
		},
		value: 'system',
	},
	{
		get label() {
			return t('Light')
		},
		value: 'light',
	},
	{
		get label() {
			return t('Dark')
		},
		value: 'dark',
	},
]

export function useAccountMenu(account: () => { username: string; displayName?: string }) {
	const route = useRoute()
	const router = useRouter()
	const colorMode = useColorMode()

	const name = computed(() => accountName(account().username, account().displayName))
	const initials = computed(() => accountInitials(account().username, account().displayName))
	const onProfile = computed(() => route.path === PROFILE_PATH)

	function goToProfile() {
		if (!onProfile.value) {
			router.push(PROFILE_PATH)
		}
	}

	return { colorMode, name, initials, onProfile, goToProfile }
}