<script setup>

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

import { ref, onMounted, useTemplateRef, inject } from 'vue';
import { Button, TableView, InputDialog } from '@cloudron/pankow';
import ActionBar from '../components/ActionBar.vue';
import Section from '../components/Section.vue';
import DockerRegistryDialog from '../components/DockerRegistryDialog.vue';
import DockerRegistriesModel from '../models/DockerRegistriesModel.js';

const dockerRegistriesModel = DockerRegistriesModel.create();

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

const columns = {
  serverAddress: {
    label: t('dockerRegistries.server'),
    sort: true
  },
  provider: {
    label: t('dockerRegistries.provider'),
    sort: true
  },
  username: {
    label: t('dockerRegistries.username'),
    sort: true
  },
  actions: {
    width: '100px',
  }
};

function createActionMenu(registry) {
  return [{
    icon: 'fa-solid fa-pencil-alt',
    label: t('main.action.edit'),
    quickAction: true,
    action: onEditOrAdd.bind(null, registry),
  }, {
    icon: 'fa-solid fa-trash-alt',
    label: t('main.action.remove'),
    quickAction: true,
    action: onRemove.bind(null, registry),
  }];
}

const features = inject('features');
const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');

const dialog = useTemplateRef('dialog');
const inputDialog = useTemplateRef('inputDialog');

function onEditOrAdd(registry = null) {
  if (registry || features.value.privateDockerRegistry) dialog.value.open(registry);
  else subscriptionRequiredDialog.value.open();
}

async function onRemove(registry) {
  const yes = await inputDialog.value.confirm({
    title: t('dockerRegistries.removeDialog.title'),
    message: t('dockerRegistres.removeDialog.description', { serverAddress: registry.serverAddress }),
    confirmStyle: 'danger',
    confirmLabel: t('main.action.remove'),
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary'
  });

  if (!yes) return;

  const [error] = await dockerRegistriesModel.remove(registry.id);
  if (error) console.error(error);

  await refresh();
}
async function refresh() {
  const [error, result] = await dockerRegistriesModel.list();
  if (error) return console.error(error);

  registries.value = result;
}

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

</script>

<template>
  <Section :title="$t('dockerRegistries.title')" :title-badge="!features.privateDockerRegistry ? 'Upgrade' : ''">
    <InputDialog ref="inputDialog" />
    <DockerRegistryDialog ref="dialog" @success="refresh()"/>

    <template #header-buttons>
      <Button @click="onEditOrAdd()">{{ $t('main.action.add') }}</Button>
    </template>

    <div v-html="$t('dockerRegistries.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></div>
    <br/>

    <TableView :columns="columns" :model="registries" :busy="busy" :placeholder="$t('dockerRegistries.emptyPlaceholder')">
      <template #actions="{ item:registry }">
        <ActionBar :actions="createActionMenu(registry)"/>
      </template>
    </TableView>
  </Section>
</template>
