<script setup>

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

import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import { API_ORIGIN, SECRET_PLACEHOLDER } from '../constants.js';
import AppRestoreDialog from  '../components/AppRestoreDialog.vue';
import Section from  '../components/Section.vue';
import ArchivesModel from '../models/ArchivesModel.js';
import { download } from '../utils.js';

const props = defineProps({
  config: Object
});

const archivesModel = ArchivesModel.create();

const columns = {
  icon: {}, // archived
  location: {
    label: t('app.location.location'),
    sort: true
  },
  info: {
    label: t('backups.archives.info'),
    sort: false,
    hideMobile: true,
  },
  creationTime: {
    label: t('main.table.date'),
    sort: true,
    hideMobile: true,
  },
  actions: {}
};

const busy = ref(true);
const archives = ref([]);

async function refreshArchives() {
  const [error, result] = await archivesModel.list();
  if (error) return console.error(error);

  // ensure we use the full api oprigin
  result.forEach(a => {
    a.iconUrl = API_ORIGIN + a.iconUrl;
  });

  archives.value = result;
}

const inputDialog = useTemplateRef('inputDialog');
async function onRemove(archive) {
  const yes = await inputDialog.value.confirm({
    title: t('backups.deleteArchiveDialog.title', { appTitle: archive.appConfig?.manifest?.title, fqdn: archive.appConfig?.fqdn }),
    message: t('backups.deleteArchiveDialog.description'),
    confirmStyle: 'danger',
    confirmLabel: t('backups.deleteArchive.deleteAction'),
    rejectLabel: t('main.dialog.cancel')
  });

  if (!yes) return;

  const [error] = await archivesModel.remove(archive.id);
  if (error) return console.error(error);

  await refreshArchives();
}

const restoreDialog = useTemplateRef('restoreDialog');

async function onRestore(archive) {
  restoreDialog.value.open(archive);
}

async function onDownloadConfig(archive) {
  // secrets and tokens already come with placeholder characters we remove them
  const tmp = {
    remotePath: archive.remotePath,
    encrypted: !!props.config.password  // we add this just to help the import UI
  };

  Object.keys(props.config).forEach((k) => {
    if (props.config[k] !== SECRET_PLACEHOLDER) tmp[k] = props.config[k];
  });

  const filename = `${archive.appConfig.fqdn}-archive-config-${(new Date(archive.creationTime)).toISOString().split('T')[0]}.json`;
  download(filename, JSON.stringify(tmp, null, 4));
}

onMounted(async () => {
  await refreshArchives();
  busy.value = false;
});

</script>

<template>
  <Section :title="$t('backups.archives.title')">
    <InputDialog ref="inputDialog"/>
    <AppRestoreDialog ref="restoreDialog"/>

    <p v-html="$t('backups.archive.description')"></p>

    <TableView :columns="columns" :model="archives" :busy="busy">
      <template #icon="archive">
        <img :src="archive.iconUrl || 'img/appicon_fallback.png'" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" height="24" width="24"/>
      </template>

      <!-- for pre-8.2 backups, appConfig can be null -->
      <template #location="archive">{{ archive.appConfig ? archive.appConfig.fqdn : '-' }}</template>

      <template #info="archive">
        <span v-tooltip="`${archive.manifest.id}@${archive.manifest.version}`">{{ archive.manifest.title }}</span>
      </template>

      <template #creationTime="archive">{{ prettyLongDate(archive.creationTime) }}</template>

      <template #actions="archive">
        <div class="table-actions">
          <ButtonGroup>
            <Button tool secondary small icon="fa-solid fa-history" v-tooltip="'Restore from Archive'" @click.stop="onRestore(archive)"></Button>
            <Button tool secondary small icon="fa-solid fa-file-alt" v-tooltip="$t('backups.listing.tooltipDownloadBackupConfig')" @click.stop="onDownloadConfig(archive)"></Button>
          </ButtonGroup>
          <Button tool danger small icon="fa-solid fa-trash-alt" v-tooltip="'Delete Archive'" @click.stop="onRemove(archive)"></Button>
        </div>
      </template>
    </TableView>
  </Section>
</template>
