<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

import { Profile } from '@easyflow/common-ui';
import { useUserStore } from '@easyflow/stores';

import { $t } from '#/locales';

import ProfileBase from './base-setting.vue';
import ProfileNotificationSetting from './notification-setting.vue';
import ProfilePasswordSetting from './password-setting.vue';
import ProfileSecuritySetting from './security-setting.vue';

const route = useRoute();
const userStore = useUserStore();

const tabsValue = ref<string>('basic');

const forcePasswordChange = computed(() => {
  return !!userStore.userInfo?.passwordResetRequired || route.query.force === '1';
});

const tabs = computed(() => {
  if (forcePasswordChange.value) {
    return [
      {
        label: $t('settingsConfig.updatePwd'),
        value: 'password',
      },
    ];
  }
  return [
    {
      label: '基本设置',
      value: 'basic',
    },
    {
      label: '安全设置',
      value: 'security',
    },
    {
      label: '修改密码',
      value: 'password',
    },
    {
      label: '新消息提醒',
      value: 'notice',
    },
  ];
});

watch(
  () => [route.query.force, route.query.tab, userStore.userInfo?.passwordResetRequired],
  () => {
    if (forcePasswordChange.value) {
      tabsValue.value = 'password';
      return;
    }
    tabsValue.value = (route.query.tab as string) || 'basic';
  },
  { immediate: true },
);
</script>
<template>
  <Profile
    v-model:model-value="tabsValue"
    :title="$t('page.auth.profile')"
    :user-info="userStore.userInfo"
    :tabs="tabs"
  >
    <template #content>
      <ProfileBase v-if="tabsValue === 'basic'" />
      <ProfileSecuritySetting v-if="tabsValue === 'security'" />
      <ProfilePasswordSetting v-if="tabsValue === 'password'" />
      <ProfileNotificationSetting v-if="tabsValue === 'notice'" />
    </template>
  </Profile>
</template>
