<script setup lang="ts">
import { storeToRefs } from 'pinia'
import {
  folderViewModeOptions,
  messageListDensityOptions,
  messageListWidthOptions,
  useMailSettingsStore,
} from '@/stores/mailSettingsStore'

const mailSettingsStore = useMailSettingsStore()
const { folderViewMode, messageListDensity, messageListWidth } = storeToRefs(mailSettingsStore)
</script>

<template>
  <div class="pa-4">
    <h3 class="text-h6 mb-4">Display Settings</h3>

    <v-list>
      <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="folderViewModeOptions"
            item-value="value"
            item-title="title"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Message list density</v-list-item-title>
        <v-list-item-subtitle>Control row height and how much detail is shown</v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="messageListDensity"
            :items="messageListDensityOptions"
            item-value="value"
            item-title="title"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Message list width</v-list-item-title>
        <v-list-item-subtitle>Set how wide the message list panel is</v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="messageListWidth"
            :items="messageListWidthOptions"
            item-value="value"
            item-title="title"
            density="compact"
            variant="outlined"
            style="width: 150px"
          />
        </template>
      </v-list-item>
    </v-list>
  </div>
</template>
