import useRouterStore from '@/useRouterStore'
import { defineComponent } from 'vue'
import UserPage from '@/user/UserPage'
import BackgroundPage from '@/layout/background/BackgroundPage'
import ThemeProvider from '@/utils/ThemeProvider'
import BlockSettings from '@/layout/grid/BlockSettings'
import SearchSetting from '@/layout/grid/SearchSetting'
import TimeSetting from '@/layout/grid/TimeSetting'
import SiderSetting from '@/layout/grid/SiderSetting'
import DockSetting from '@/layout/grid/DockSetting'
import Feedback from '@/layout/grid/Feedback'
import Reset from '@/layout/grid/Reset'

export default defineComponent(() => {
  const router = useRouterStore()

  return () => (
    <div class="w-full h-full   rounded-xl">
      <ThemeProvider>
        {router.path === 'settings-user' ? (
          <UserPage />
        ) : router.path === 'settings-background' ? (
          <BackgroundPage />
        ) : router.path === 'settings-block' ? (
          <BlockSettings />
        ) : router.path === 'settings-search' ? (
          <SearchSetting />
        ) : router.path === 'settings-time' ? (
          <TimeSetting />
        ) : router.path === 'settings-sider' ? (
          <SiderSetting />
        ) : router.path === 'settings-dock' ? (
          <DockSetting />
        ) : router.path === 'settings-reset' ? (
          <Reset />
        ) : router.path === 'settings-fallback' ? (
          <Feedback />
        ) : null}
      </ThemeProvider>
    </div>
  )
})