<template>
  <n-config-provider data-cy="app" :theme="theme" :class="{ dark: mode }">
    <n-layout position="absolute" style="height: 100vh">
      <n-layout-header style="padding: 24px" bordered>
        <div class="flex justify-between items-center">
          <div class="back" style="position: relative; top: 4px">
            <n-icon size="24" :component="ChevronBackOutline" />
            <span style="position: relative; top: -6px">返回我的场景</span>
          </div>
          <n-button type="primary"> 保存 </n-button>
          <!-- <n-switch data-cy="dark-mode" v-model:value="mode">
            <template #checked> Dark </template>
            <template #unchecked> Light </template>
            <template #checked-icon>
              <n-icon>
                <moon />
              </n-icon>
            </template>
            <template #unchecked-icon>
              <n-icon>
                <sun />
              </n-icon>
            </template>
          </n-switch> -->
        </div>
      </n-layout-header>
      <n-layout
        class="bg-white dark:bg-gray-800 dark:text-white text-gray-800 h-screen w-screen"
        position="absolute"
        style="top: 83px; bottom: 64px"
        has-sider
      >
        <!-- collapse-mode="transform" 
          @mouseover="collapsed = false"
          @mouseleave="collapsed = true" -->
        <n-layout-sider
          data-cy="sidebar"
          :width="180"
          :collapsed="collapsed"
          :native-scrollbar="false"
          bordered
        >
          <n-menu :options="menuOptions" @update:value="handleUpdateValue" />
        </n-layout-sider>
        <n-layout-content
          content-class="layoutContent"
          :native-scrollbar="false"
        >
          <router-view />
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-config-provider>
</template>

<script setup lang="ts">
import { darkTheme, lightTheme } from 'naive-ui'
import { computed, ref, watchEffect, h } from 'vue'
import type { Component } from 'vue'
import {
  ChevronBackOutline,
  Layers,
  Cog,
  HomeOutline as HomeIcon,
  RepeatOutline,
  PeopleOutline,
  ChatboxEllipses
} from '@vicons/ionicons5'
const darkStore = localStorage.getItem('dark')
import { RouterLink } from 'vue-router'
import { NIcon, useMessage } from 'naive-ui'
const prefersDark: boolean = darkStore
  ? darkStore === 'true'
  : window.matchMedia('(prefers-color-scheme: dark)').matches

const mode = ref<boolean>(prefersDark)
const theme = computed(() => (mode.value ? darkTheme : lightTheme))

watchEffect(() => {
  localStorage.setItem('dark', `${mode.value}`)
})
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
const collapsed = ref(false)
const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'basicSettings'
            // params: {
            //   lang: 'zh-CN'
            // }
          }
        },
        { default: () => '基础设置' }
      ),
    key: 'basicSettings',
    icon: renderIcon(Cog)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'digitalHuman'
            // params: {
            //   lang: 'zh-CN'
            // }
          }
        },
        { default: () => '数字人播报' }
      ),
    key: 'digitalHuman',
    icon: renderIcon(PeopleOutline)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'textToaudio'
            // params: {
            //   lang: 'zh-CN'
            // }
          }
        },
        { default: () => '文字语音互转' }
      ),
    key: 'textToaudio',
    icon: renderIcon(RepeatOutline)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'message'
            // params: {
            //   lang: 'zh-CN'
            // }
          }
        },
        { default: () => '留言互动' }
      ),
    key: 'message',
    icon: renderIcon(ChatboxEllipses)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'topicNavigation'
            // params: {
            //   lang: 'zh-CN'
            // }
          }
        },
        { default: () => '专题导航' }
      ),
    key: 'topicNavigation',
    icon: renderIcon(Layers)
  }
]
const handleUpdateValue = (value: string) => {
  console.log(value)
}
</script>

<style lang="sass">
#app
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
.layoutContent
  padding: 10px
  max-height: calc(100vh - 83px)
</style>
