import AvatarCircle from '@/user/AvatarCircle'
import useRouterStore from '@/useRouterStore'
import asyncLoader from '@/utils/asyncLoader'
import { OhVueIcon } from 'oh-vue-icons'
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.path = 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.path = ''
          }}
        ></div>
      )}
      {/* 弹框主体 */}
      <Transition name="settings">
        {show.value && (
          <div class="absolute left-6 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
            {
              router.path.startsWith('settings-') ?
                <>
                  <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.path = '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 />
                </>
                :
                router.path.startsWith('s2') ?
                  <>
                    <div class="w-full h-full flex justify-center items-center bg-red-300">
                    </div>
                  </>
                  : ''

            }

          </div>
        )}
      </Transition>
    </div>
  )
})