<template>
  <q-page padding>
    <q-card
      flat
      bordered
    >
      <q-card-section>
        <div class="text-h4">
          User Preferences
        </div>
      </q-card-section>
      <q-separator />
      <q-card-section v-if="loading">
        <q-spinner-dots size="2em" /> Loading preferences...
      </q-card-section>
      <q-card-section v-else-if="error">
        <q-banner
          inline-actions
          class="text-white bg-red"
        >
          <template #avatar>
            <q-icon name="error" />
          </template>
          {{ error }}
          <template #action>
            <q-btn
              flat
              color="white"
              label="Retry"
              @click="loadPreferences"
            />
          </template>
        </q-banner>
      </q-card-section>
      <q-card-section v-else>
        <q-form @submit.prevent="savePreferences">
          <div
            v-for="(group, groupName) in preferences"
            :key="groupName"
            class="q-mb-lg"
          >
            <div class="text-h6 q-mb-sm">
              {{ groupName.replaceAll('_', ' ') }}
            </div>
            <div
              v-for="pref in group"
              :key="pref.key"
              class="q-mb-md"
            >
              <q-select
                v-if="pref.options"
                v-model="preferenceValues[pref.key]"
                :label="pref.name"
                :options="pref.options"
                outlined
                dense
                emit-value
                map-options
              />
              <q-input
                v-else
                v-model="preferenceValues[pref.key]"
                :label="pref.name"
                :type="pref.type || 'text'"
                outlined
                dense
              />
            </div>
            <q-separator class="q-my-md" />
          </div>
          <div class="row justify-end">
            <q-btn
              label="Save Preferences"
              type="submit"
              color="primary"
              :loading="saving"
              :disable="loading || saving"
            />
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script setup>
import { useQuasar } from 'quasar';
import { onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { usePreferencesStore } from 'stores/preferences';

const $q = useQuasar();
const preferencesStore = usePreferencesStore();
const { preferences, values: preferenceValues, loading, saving, error } = storeToRefs(preferencesStore);

function notifyError(msg)
{
  $q.notify({ color: 'negative', icon: 'error', message: msg });
}
function notifySuccess(msg)
{
  $q.notify({ color: 'positive', icon: 'check_circle', message: msg });
}

async function loadPreferences()
{
  await preferencesStore.loadPreferences();
  if (error.value) notifyError(error.value);
}

async function savePreferences()
{
  await preferencesStore.savePreferences();
  if (error.value) notifyError(error.value);
  else notifySuccess('Preferences saved!');
}

onMounted(() =>
{
  loadPreferences();
});
</script>
