<template>
  <settings-card
    border
    icon="mdi-monitor"
    title="显示设置"
  >
    <v-list>
      <v-list-item>
        <template #prepend>
          <v-icon
            class="mr-3"
            icon="mdi-theme-light-dark"
          />
        </template>
        <v-list-item-title>主题模式</v-list-item-title>
        <v-list-item-subtitle>选择明亮或暗黑主题</v-list-item-subtitle>
        <template #append>
          <v-btn-toggle
            v-model="localTheme"
            color="primary"
            density="comfortable"
          >
            <v-btn value="light">
              <v-icon
                class="mr-2"
                icon="mdi-white-balance-sunny"
              />
              明亮
            </v-btn>
            <v-btn value="dark">
              <v-icon
                class="mr-2"
                icon="mdi-moon-waning-crescent"
              />
              暗黑
            </v-btn>
          </v-btn-toggle>
        </template>
      </v-list-item>

      <v-divider class="my-2" />
      <setting-item :setting-key="'timeCard.enabled'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.emptySubjectDisplay'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.dynamicSort'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.showRandomButton'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.showFullscreenButton'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.cardHoverEffect'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.enhancedTouchMode'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.showQuickTools'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.showAntiScreenBurnCard'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.showExamScheduleButton'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.forceDesktopMode'" />

      <v-divider class="my-2" />
      <setting-item :setting-key="'display.lateStudentsArePresent'" />
    </v-list>
  </settings-card>
</template>

<script>
import SettingsCard from '@/components/SettingsCard.vue';
import SettingItem from '@/components/settings/SettingItem.vue';
import {getSetting, setSetting} from '@/utils/settings';
import {useTheme} from 'vuetify';

export default {
  name: 'DisplaySettingsCard',
  components: {SettingsCard, SettingItem},

  setup() {
    const theme = useTheme();
    return {theme};
  },

  data() {
    return {
      localTheme: getSetting('theme.mode'),
    };
  },

  watch: {
    localTheme(newValue) {
      setSetting('theme.mode', newValue);
      this.theme.global.name.value = newValue;
    },
  },
};
</script>
