<template>
	<div>
		<div class="label">{{ $t('Home.region') }}</div>
		<dropdown-menu v-model="base" :list="baseList" @change="changeBase" />
	</div>
	<div>
		<div class="label">{{ $t('Home.role') }}</div>
		<dropdown-menu v-model="role" :list="roles" @change="changeRole" />
	</div>
	<div>
		<div class="label">{{ $t('Home.currentAgentProfile') }}</div>
		<div class="group">
			<span class="icon"><svg-icon name="xiang" size="20" color="#000" /></span>
			<dropdown-menu v-model="agent" :list="agents" @change="changeAgent" />
		</div>
	</div>
	<div>
		<div class="label">{{ $t('Home.currentNotificationFrequency') }}</div>
		<div class="value">{{ $t('Home.timesPerHour', { time: '3–6' }) }}</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, onBeforeUnmount, inject } from 'vue'
	import dropdownMenu from '@/components/dropdown-menu.vue'
	import { useUserInfoStore } from '@/stores'
	import { UpdateUserProfile } from '@/api/user'
	import { useI18n } from 'vue-i18n'
	const userInfoStore = useUserInfoStore()
	const { t } = useI18n()
	const base = ref(userInfoStore.state.userInfo.base)
	const baseList = ref([
		{ label: t('Country.unitedStates'), value: 'United States' },
		{ label: t('Country.singapore'), value: 'Singapore' },
		{ label: t('Country.australia'), value: 'Australia' },
		{ label: t('Country.southKorea'), value: 'South Korea' },
		{ label: t('Country.china'), value: 'China' },
		{ label: t('Country.italy'), value: 'Italy' },
		{ label: t('Country.france'), value: 'France' },
		{ label: t('Country.japan'), value: 'Japan' },
		{ label: t('Country.canada'), value: 'Canada' },
		{ label: t('Country.germany'), value: 'Germany' }
	])
	const changeBase = (value: string) => {
		onSubmit({ base: value })
	}

	const role = ref(userInfoStore.state.userInfo.role)
	const roles = ref([
		{ label: t('Role.designer'), value: 'Designer' },
		{ label: t('Role.student'), value: 'Student' },
		{ label: t('Role.teacher'), value: 'Teacher' },
		{ label: t('Role.parent'), value: 'Parent' },
		{ label: t('Role.other'), value: 'Other' }
	])
	const changeRole = (value: string) => {
		onSubmit({ role: value })
	}

	const agent = ref('Partner')
	const agents = ref([
		{ label: 'Partner', value: 'Partner' },
		{ label: 'Observer', value: 'Observer' },
		{ label: 'Mentor', value: 'Mentor' }
	])
	const changeAgent = (value: string) => {
		// onSubmit({ agent: value })
	}
	const onSubmit = (value = {}) => {
		const data = {
			// base: userInfoStore.state.userInfo.base,
			// role: userInfoStore.state.userInfo.role,
			// vibe: userInfoStore.state.userInfo.vibe,
			...value
		}
		UpdateUserProfile(data, true)
			.then((res) => {})
			.catch((err) => {})
	}
</script>
 
<style lang="less" scoped>
	.group {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}
</style>
