<script setup>

import { ref, onMounted, useTemplateRef } from 'vue';
import { SingleSelect } from '@cloudron/pankow';
import { setLanguage } from '../i18n.js';
import moment from 'moment-timezone';
import SettingsItem from '../components/SettingsItem.vue';
import SaveIndicator from '../components/SaveIndicator.vue';
import Section from '../components/Section.vue';
import CloudronModel from '../models/CloudronModel.js';
import DashboardModel from '../models/DashboardModel.js';
import SystemModel from '../models/SystemModel.js';

const systemModel = SystemModel.create();
const dashboardModel = DashboardModel.create();
const cloudronModel = CloudronModel.create();

const config = ref({});
const info = ref({});

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

async function onTimeZoneChange(value) {
  const [error] = await cloudronModel.setTimeZone(value);
  if (error) {
    timezoneSaveIndicator.value.error();
    return console.error(error);
  }

  currentTimeZone.value = value;

  timezoneSaveIndicator.value.success();
}

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

async function onLanguageChange(value) {
  value = value === 'zh' ? 'zh_Hans' : value;

  const [error] = await cloudronModel.setLanguage(value);
  if (error) {
    languageSaveIndicator.value.error();
    return console.error(error);
  }

  currentLanguage.value = value;

  await setLanguage(value, false);

  languageSaveIndicator.value.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 => {
    const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });

    // hack for chinese simplified
    l = l === 'zh_Hans' ? 'zh' : l;

    return {
      id: l,
      display: displayNames.of(l) || l,
    };
  }).sort((a, b) => {
    return a.display.localeCompare(b.display);
  });

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

  language.value = result;
  currentLanguage.value = result;

  [error, result] = await systemModel.info();
  if (error) return console.error(error);
  info.value = result;

  [error, result] = await dashboardModel.config();
  if (error) return console.error(error);
  config.value = result;
});

</script>

<template>
  <div class="content">
    <Section :title="$t('system.locale.title')">
      <SettingsItem wrap>
        <div>
          <label>{{ $t('settings.timezone.title') }}</label>
          <div v-html="$t('settings.timezone.description')"></div>
        </div>
        <div style="display: flex; gap: 6px; align-items: center;">
          <SingleSelect style="min-width: 160px" v-model="timeZone" :searchThreshold="10" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
          <SaveIndicator ref="timezoneSaveIndicator"/>
        </div>
      </SettingsItem>

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