import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ContainerWidthEnum } from '@/enums/appEnum'
import AppConfig from '@/config'
import { headerBarConfig } from '@/config/modules/headerBar'
function useSettingsConfig() {
  const { t } = useI18n()
  const tabStyleOptions = computed(() => [
    {
      value: 'tab-default',
      label: t('setting.tabStyle.default')
    },
    {
      value: 'tab-card',
      label: t('setting.tabStyle.card')
    },
    {
      value: 'tab-google',
      label: t('setting.tabStyle.google')
    }
  ])
  const pageTransitionOptions = computed(() => [
    {
      value: '',
      label: t('setting.transition.list.none')
    },
    {
      value: 'fade',
      label: t('setting.transition.list.fade')
    },
    {
      value: 'slide-left',
      label: t('setting.transition.list.slideLeft')
    },
    {
      value: 'slide-bottom',
      label: t('setting.transition.list.slideBottom')
    },
    {
      value: 'slide-top',
      label: t('setting.transition.list.slideTop')
    }
  ])
  const customRadiusOptions = [
    { value: '0', label: '0' },
    { value: '0.25', label: '0.25' },
    { value: '0.5', label: '0.5' },
    { value: '0.75', label: '0.75' },
    { value: '1', label: '1' }
  ]
  const containerWidthOptions = computed(() => [
    {
      value: ContainerWidthEnum.FULL,
      label: t('setting.container.list[0]'),
      icon: 'icon-park-outline:auto-width'
    },
    {
      value: ContainerWidthEnum.BOXED,
      label: t('setting.container.list[1]'),
      icon: 'ix:width'
    }
  ])
  const boxStyleOptions = computed(() => [
    {
      value: 'border-mode',
      label: t('setting.box.list[0]'),
      type: 'border-mode'
    },
    {
      value: 'shadow-mode',
      label: t('setting.box.list[1]'),
      type: 'shadow-mode'
    }
  ])
  const configOptions = {
    // 主题色彩选项
    mainColors: AppConfig.systemMainColor,
    // 主题风格选项
    themeList: AppConfig.settingThemeList,
    // 菜单布局选项
    menuLayoutList: AppConfig.menuLayoutList
  }
  const basicSettingsConfig = computed(() => {
    const allSettings = [
      {
        key: 'showWorkTab',
        label: t('setting.basics.list.multiTab'),
        type: 'switch',
        handler: 'workTab',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'uniqueOpened',
        label: t('setting.basics.list.accordion'),
        type: 'switch',
        handler: 'uniqueOpened',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'showMenuButton',
        label: t('setting.basics.list.collapseSidebar'),
        type: 'switch',
        handler: 'menuButton',
        headerBarKey: 'menuButton'
      },
      {
        key: 'showFastEnter',
        label: t('setting.basics.list.fastEnter'),
        type: 'switch',
        handler: 'fastEnter',
        headerBarKey: 'fastEnter'
      },
      {
        key: 'showRefreshButton',
        label: t('setting.basics.list.reloadPage'),
        type: 'switch',
        handler: 'refreshButton',
        headerBarKey: 'refreshButton'
      },
      {
        key: 'showCrumbs',
        label: t('setting.basics.list.breadcrumb'),
        type: 'switch',
        handler: 'crumbs',
        mobileHide: true,
        headerBarKey: 'breadcrumb'
      },
      {
        key: 'showLanguage',
        label: t('setting.basics.list.language'),
        type: 'switch',
        handler: 'language',
        headerBarKey: 'language'
      },
      {
        key: 'showNprogress',
        label: t('setting.basics.list.progressBar'),
        type: 'switch',
        handler: 'nprogress',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'colorWeak',
        label: t('setting.basics.list.weakMode'),
        type: 'switch',
        handler: 'colorWeak',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'watermarkVisible',
        label: t('setting.basics.list.watermark'),
        type: 'switch',
        handler: 'watermark',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'menuOpenWidth',
        label: t('setting.basics.list.menuWidth'),
        type: 'input-number',
        handler: 'menuOpenWidth',
        min: 180,
        max: 320,
        step: 10,
        style: { width: '120px' },
        controlsPosition: 'right',
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'tabStyle',
        label: t('setting.basics.list.tabStyle'),
        type: 'select',
        handler: 'tabStyle',
        options: tabStyleOptions.value,
        style: { width: '120px' },
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'pageTransition',
        label: t('setting.basics.list.pageTransition'),
        type: 'select',
        handler: 'pageTransition',
        options: pageTransitionOptions.value,
        style: { width: '120px' },
        headerBarKey: null
        // 不依赖headerBar配置
      },
      {
        key: 'customRadius',
        label: t('setting.basics.list.borderRadius'),
        type: 'select',
        handler: 'customRadius',
        options: customRadiusOptions,
        style: { width: '120px' },
        headerBarKey: null
        // 不依赖headerBar配置
      }
    ]
    return allSettings
      .filter((setting) => {
        if (setting.headerBarKey === null) {
          return true
        }
        const headerBarFeature = headerBarConfig[setting.headerBarKey]
        return headerBarFeature?.enabled !== false
      })
      .map((setting) => {
        const nextSetting = { ...setting }
        delete nextSetting.headerBarKey
        return nextSetting
      })
  })
  return {
    // 选项配置
    tabStyleOptions,
    pageTransitionOptions,
    customRadiusOptions,
    containerWidthOptions,
    boxStyleOptions,
    configOptions,
    // 设置项配置
    basicSettingsConfig
  }
}
export { useSettingsConfig }