<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { api } from '../api'
import { CURRENCIES } from '../taskui'

// Глобальные настройки: валюта бюджетов выбирается один раз и применяется всюду.

const currency = ref('UAH')
const error = ref('')
const saving = ref(false)
const saved = ref(false)

onMounted(async () => {
  try {
    currency.value = (await api.getSettings()).currency
  } catch (e) {
    error.value = String(e)
  }
})

async function save() {
  error.value = ''
  saved.value = false
  saving.value = true
  try {
    currency.value = (await api.updateSettings({ currency: currency.value })).currency
    saved.value = true
  } catch (e) {
    error.value = String(e)
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <section>
    <GnPageHeader kicker="gntodo" title="Настройки" />

    <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>

    <GnCard>
      <template #title>Валюта бюджетов</template>
      <p class="hint">
        Единица выбирается один раз и применяется во всех суммах: бюджет задачи, оценка затрат.
      </p>
      <GnSelect
        v-model="currency"
        label="Единица измерения"
        :options="CURRENCIES.map((c) => ({ value: c.value, label: c.label }))"
      />
      <div class="form-actions">
        <GnButton
          variant="primary"
          icon="ph-floppy-disk"
          :disabled="saving"
          @click="save"
        >
          Сохранить
        </GnButton>
      </div>
      <GnAlert v-if="saved" variant="success">Сохранено — применяется во всех видах.</GnAlert>
    </GnCard>
  </section>
</template>

<style scoped>
.hint {
  color: var(--muted, #888);
  margin: 0 0 0.75rem;
}
.form-actions {
  margin-top: 0.75rem;
}
.form-actions + .alert,
:deep(.alert) {
  margin-top: 0.75rem;
}
</style>