import AvatarCircle from '@/user/AvatarCircle'
import useRouterStore from '@/useRouterStore'
import asyncLoader from '@/utils/asyncLoader'
import { computed, defineComponent, Transition } from 'vue'
const Content = asyncLoader(() => import('./SettingsOverlayContent'))

const SettingsTab = defineComponent({
  props: {
    label: {
      type: String,
      required: true
    },
    path: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const router = useRouterStore()
    return () => (
      <div
        class={
          'w-full h-[30px] leading-[30px] text-sm text-center rounded-lg text-slate-600 my-1 transition-all cursor-pointer hover:bg-white/70 ' +
          (router.path === props.path ? 'bg-white/70 font-bold shadow-lg' : '')
        }
        onClick={() => {
          router.go(props.path as any)
        }}
      >
        {props.label}
      </div>
    )
  }
})

export default defineComponent(() => {
  const router = useRouterStore()
  const show = computed(() => router.path.startsWith('settings-'))
  return () => (
    <div class="fixed left-0 bottom-0 z-40 w-full">
      {/* 背景遮罩 */}
      {show.value && (
        <div
          class="w-full h-screen"
          onClick={() => {
            router.back()
          }}
        ></div>
      )}
      {/* 弹框主体 */}
      <Transition name="settings">
        {show.value && (
          <div class="absolute left-6 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
            <div class="w-[200px] p-4 h-full bg-white/60 backdrop-blur flex flex-col">
              <div
                class={
                  'w-full h-0 flex-grow mb-4 rounded-lg hover:bg-white/70 transition-all cursor-pointer flex justify-center items-center ' +
                  (router.path === 'settings-user' ? 'bg-white/70 shadow-lg' : '')
                }
                onClick={() => {
                  router.go('settings-user')
                }}
              >
                <div class="w-12 h-12 relative">
                  <AvatarCircle />
                </div>
              </div>
              <SettingsTab label="壁纸" path="settings-background" />
              <SettingsTab label="图标" path="settings-block" />
              <SettingsTab label="搜索" path="settings-search" />
              <SettingsTab label="时间" path="settings-time" />
              <SettingsTab label="侧边栏" path="settings-sider" />
              <SettingsTab label="AI助手" path="settings-ai" />
              <SettingsTab label="快捷栏" path="settings-dock" />
              <SettingsTab label="重置" path="settings-reset" />
              <SettingsTab label="问题反馈" path="settings-fallback" />
            </div>
            <Content />
          </div>
        )}
      </Transition>
    </div>
  )
})