<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUser } from '@KTXC/composables/useUser'

type FolderViewMode = 'tree' | 'page'

const { settings, setSetting } = useUser()

const theme = ref('Auto')
const showPreview = ref(true)
const compactMode = ref(false)

const folderViewMode = computed({
  get: () => {
    return (settings.value.get('mail.folderViewMode') as FolderViewMode) || 'tree'
  },
  set: (value: FolderViewMode) => setSetting('mail.folderViewMode', value)
})
</script>

<template>
  <div class="pa-4">
    <h3 class="text-h6 mb-4">Display Settings</h3>
    <v-list>
      <v-list-item>
        <v-list-item-title>Theme</v-list-item-title>
        <v-list-item-subtitle>Choose your preferred theme</v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="theme"
            :items="['Light', 'Dark', 'Auto']"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Message preview</v-list-item-title>
        <v-list-item-subtitle>Show message preview in list</v-list-item-subtitle>
        <template #append>
          <v-switch v-model="showPreview" color="primary" hide-details />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Compact mode</v-list-item-title>
        <v-list-item-subtitle>Use compact message list layout</v-list-item-subtitle>
        <template #append>
          <v-switch v-model="compactMode" color="primary" hide-details />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Folder navigation style</v-list-item-title>
        <v-list-item-subtitle>Choose how folders are displayed</v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="folderViewMode"
            :items="[
              { value: 'tree', title: 'Tree' },
              { value: 'page', title: 'Page' }
            ]"
            item-value="value"
            item-title="title"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>
    </v-list>
  </div>
</template>
