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

const mailSettingsStore = useMailSettingsStore()
const { messageReadEnabled, messageReadDelay } = storeToRefs(mailSettingsStore)
</script>

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

    <v-list>
      <v-list-item>
        <v-list-item-title>Mark messages as read automatically</v-list-item-title>
        <v-list-item-subtitle>
          Mark a message as read after it stays open for the configured delay
        </v-list-item-subtitle>
        <template #append>
          <v-switch v-model="messageReadEnabled" color="primary" hide-details />
        </template>
      </v-list-item>

      <v-list-item>
        <v-list-item-title>Read delay</v-list-item-title>
        <v-list-item-subtitle>
          Choose how long a message must stay open before it is marked as read
        </v-list-item-subtitle>
        <template #append>
          <v-select
            v-model="messageReadDelay"
            :items="messageReadDelayOptions"
            item-title="title"
            item-value="value"
            density="compact"
            variant="outlined"
            :disabled="!messageReadEnabled"
            style="width: 180px"
          />
        </template>
      </v-list-item>
    </v-list>
  </div>
</template>