<template>
  <v-navigation-drawer app location="right" v-model="setsActive" class="elevation-5 pb-0">
    <v-toolbar>
      <v-toolbar-title>主题设置</v-toolbar-title>
      <v-spacer />
      <v-btn size="small" icon @click.stop="setsActive = !setsActive">
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-toolbar>
    <v-sheet class="ma-4 v-settings" color="transparent">
      <strong class="mb-4 d-inline-block">主题颜色设置</strong>
      <v-divider />
      <div class="pa-5">
        <v-radio-group v-model="themeColorThis" column>
          <v-row v-for="item in themeColors" :key="item.name" class="mb-1">
            <v-radio :value="item.name" @change="setThemeColor(item)" />
            <v-btn size="x-small" :class="[item.dark ? 'bg-black' : 'bg-white']" />
            <v-btn size="x-small" :color="item.primary" class="ml-2" />
            <v-btn size="x-small" :color="item.secondary" class="ml-2" />
            <v-btn size="x-small" :color="item.accent" class="ml-2" />
          </v-row>
        </v-radio-group>
      </div>
    </v-sheet>

    <v-sheet class="ma-4 v-settings" color="transparent">
      <strong class="mb-3 d-inline-block">边栏背景设置</strong>
      <v-divider />
      <v-row class="pa-5 ml-2">
        <v-col v-for="item in naviColors" :key="item.name" cols="2">
          <v-btn icon size="small" :class="[item.class, 'elevation-3']" @click="setNaviColors(item)" />
        </v-col>
      </v-row>
    </v-sheet>

    <v-sheet class="ma-4 v-settings" color="transparent">
      <strong class="mb-3 d-inline-block">控制面板设置</strong>
      <v-divider />

      <v-row align="center" no-gutters>
        <v-col cols="auto">页面选项卡</v-col>
        <v-spacer />
        <v-col cols="auto">
          <v-switch v-model="tabsActive" color="primary" hide-details inset></v-switch>
        </v-col>
      </v-row>

      <v-row align="center" no-gutters>
        <v-col cols="auto">菜单栏置左</v-col>
        <v-spacer />
        <v-col cols="auto">
          <v-switch v-model="naviLocate" color="primary" hide-details inset></v-switch>
        </v-col>
      </v-row>

      <v-row align="center" no-gutters>
        <v-col cols="auto">菜单栏展开</v-col>
        <v-spacer />
        <v-col cols="auto">
          <v-switch v-model="naviActive" color="primary" hide-details inset></v-switch>
        </v-col>
      </v-row>

      <v-row align="center" no-gutters>
        <v-col cols="auto">菜单栏背景</v-col>
        <v-spacer />
        <v-col cols="auto">
          <v-switch v-model="backgroundNav" color="primary" hide-details inset></v-switch>
        </v-col>
      </v-row>
    </v-sheet>
  </v-navigation-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useSettingsStore } from '@/stores/settings'
import { useTheme } from 'vuetify'
import Themes from "@/commons/themes"

const store = useSettingsStore()
const theme = useTheme()

const themeColorThis = ref(store.themeColor.name)
const backgroundNav = ref(false)

const themeColors = computed(() => Themes.theme_colors)
const naviColors = computed(() => Themes.navi_colors)

const naviActive = computed({
  get: () => store.naviActive,
  set: (value) => store.setNaviActive(value)
})

const naviLocate = computed({
  get: () => {
    return store.naviLocate === "left"
  },
  set: (value) => {
    const val = value ? "left" : "top"
    store.setNaviLocate(val)
  }
})

const setsActive = computed({
  get: () => store.setsActive,
  set: (value) => store.setSetsActive(value)
})

const tabsActive = computed({
  get: () => store.tabsActive,
  set: (value) => store.setTabsActive(value)
})

const setThemeColor = (value) => {
  store.setThemeColor(value)
  theme.global.name.value = value.dark ? 'dark' : 'light'

  if (value.dark) {
    theme.themes.value.dark.colors.primary = value.primary
    theme.themes.value.dark.colors.secondary = value.secondary
    theme.themes.value.dark.colors.accent = value.accent
  } else {
    theme.themes.value.light.colors.primary = value.primary
    theme.themes.value.light.colors.secondary = value.secondary
    theme.themes.value.light.colors.accent = value.accent
  }
}

const setNaviColors = (value) => {
  store.setNaviColors(value)
}
</script>
