<script setup>

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

import { ref, onMounted } from 'vue';
import { Button, TableView } from 'pankow';
import { eachLimit } from 'async';
import Section from '../components/Section.vue';
import DomainsModel from '../models/DomainsModel.js';
import MailModel from '../models/MailModel.js';

const domainsModel = DomainsModel.create();
const mailModel = MailModel.create();

const columns = {
  fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
  ownerId: { label: t('email.incoming.mailboxes.owner'), sort: true },
  aliases: { label: t('email.incoming.mailboxes.aliases'), sort: true },
  usage: { label: t('email.incoming.mailboxes.usage'), sort: true },
  actions: {}
};

const busy = ref(true);
const mailboxes = ref([]);
const domains = ref([]);

function renderAliases(aliases) {
  return aliases.map(a => `${a.name}@${a.domain}`).join(', ');
}

// function updateMailUsage(mailboxName, quotaLimit) {
//     if (!$scope.mailUsage) $scope.mailUsage = {};
//     if (!$scope.mailUsage[mailboxName]) $scope.mailUsage[mailboxName] = {};
//     $scope.mailUsage[mailboxName].quotaLimit = quotaLimit;
// }

async function refreshForDomain(domain) {
  let [error, result] = await mailModel.usage(domain);
  if (error) return console.error(error);

  const usage = result;

  console.log(usage);

  [error, result] = await mailModel.listMailboxes(domain);
  if (error) throw error;

  result.forEach((m) => {
    m.fullName = m.name + '@' + m.domain; // to make it simple for the ui
    // m.owner = $scope.owners.find(function (o) { return o.id === m.ownerId; }); // owner may not exist
    // m.ownerDisplayName = m.owner ? m.owner.display : ''; // this meta property is set when we get the user list
  });

  mailboxes.value = mailboxes.value.concat(result);
}

async function refresh() {
  busy.value = true;

  try {
    await eachLimit(domains.value.map(d => d.domain), 10, refreshForDomain);
  } catch (error) {
    return console.error(error);
  }

  busy.value = false;
}

onMounted(async () => {
  const [error, result] = await domainsModel.list();
  if (error) return console.error(error);

  domains.value = result;

  await refresh();
});

</script>

<template>
  <div>
    <Section :title="$t('email.incoming.mailboxes.title')">
      <template #header-buttons>
        <Button>{{ $t('email.incoming.mailboxes.addAction') }}</Button>
      </template>

      <TableView :columns="columns" :model="mailboxes" :busy="busy">
        <template #aliases="mailbox">{{ renderAliases(mailbox.aliases) }}</template>
        <template #usage="mailbox">
          <span v-if="mailUsage !== null">
            <!-- {{ mailUsage[mailbox.fullName].quotaValue | prettyDecimalSize }} <span ng-show="mailUsage[mailbox.fullName].quotaLimit">/ {{ mailUsage[mailbox.fullName].quotaLimit | prettyDecimalSize }}</span> -->
          </span>
          <span ng-show="mailUsage === null">
            <!-- {{ 'main.loadingPlaceholder' | tr }} ... -->
          </span>
        </template>
      </TableView>
    </Section>
  </div>
</template>
