<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, watch } from 'vue';
import { SingleSelect } from 'pankow';
import moment from 'moment-timezone';
import SettingsItem from '../components/SettingsItem.vue';
import Section from '../components/Section.vue';
import CloudronAccount from '../components/CloudronAccount.vue';
import SystemUpdate from '../components/SystemUpdate.vue';
import PrivateRegistry from '../components/PrivateRegistry.vue';
import CloudronModel from '../models/CloudronModel.js';

const cloudronModel = CloudronModel.create();

// Timezone
const allTimezones = moment.tz.names().map(t => { return { id: t }; });
const timeZone = ref('');
const currentTimeZone = ref('');

watch(timeZone, async (newTimeZone, oldTimeZone) => {
  if (!oldTimeZone) return;

  const [error] = await cloudronModel.setTimeZone(newTimeZone);
  if (error) {
    console.error(error);
    window.pankow.notify({ text: 'Failed to set timezone. Check logs', type: 'danger' });
    timeZone.value = currentTimeZone.value;
  } else {
    currentTimeZone.value = newTimeZone;
    window.pankow.notify({ text: 'Timezone changed', type: 'success' });
  }
});

// Language
const allLanguages = ref([]);
const language = ref('');
const currentLanguage = ref('');

watch(language, async (newLanguage, oldLanguage) => {
  if (!oldLanguage) return;

  const [error] = await cloudronModel.setLanguage(newLanguage);
  if (error) {
    console.error(error);
    window.pankow.notify({ text: 'Failed to set language. Check logs', type: 'danger' });
    language.value = currentLanguage.value;
  } else {
    currentLanguage.value = newLanguage;
    window.pankow.notify({ text: 'Language changed', type: 'success' });
  }
});

onMounted(async () => {
  let [error, result] = await cloudronModel.getTimeZone();
  if (error) return console.error(error);

  timeZone.value = result;
  currentTimeZone.value = result;

  [error, result] = await cloudronModel.languages();
  if (error) return console.error(error);

  allLanguages.value = result.map(l => {
    return {
      id: l,
      display: t(`lang.${l}`)
    };
  });

  [error, result] = await cloudronModel.getLanguage();
  if (error) return console.error(error);

  language.value = result;
  currentLanguage.value = result;
});

</script>

<template>
  <div class="content">
    <Section :title="$t('settings.title')" :padding="false">
      <SettingsItem wrap>
        <FormGroup>
          <label>{{ $t('settings.timezone.title') }}</label>
          <div v-html="$t('settings.timezone.description', { timeZone })"></div>
        </FormGroup>
        <div style="display: flex; gap: 6px; align-items: center;">
          <SingleSelect style="min-width: 160px" v-model="timeZone" :options="allTimezones" option-key="id" option-label="id" />
        </div>
      </SettingsItem>

      <SettingsItem wrap>
        <FormGroup>
          <label>{{ $t('settings.language.title') }}</label>
          <div>{{ $t('settings.language.description') }}</div>
        </FormGroup>
        <div style="display: flex; gap: 6px; align-items: center;">
          <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" />
        </div>
      </SettingsItem>
    </Section>

    <CloudronAccount />
    <SystemUpdate />
    <PrivateRegistry />
  </div>
</template>
