<script setup>

import { onMounted, onUnmounted, useTemplateRef } from 'vue';
import EventlogList from '../components/EventlogList.vue';
import EventlogsModel from '../models/EventlogsModel.js';
import { EVENTS } from '../constants.js';

const eventlogsModel = EventlogsModel.create();
const eventlogList = useTemplateRef('eventlogList');

const availableActions = [
  { separator: true, label: 'App' },
  { id: EVENTS.APP_BACKUP, label: 'Backup started' },
  { id: EVENTS.APP_BACKUP_FINISH, label: 'Backup finished' },
  { id: EVENTS.APP_CONFIGURE, label: 'Reconfigured' },
  { id: EVENTS.APP_INSTALL, label: 'Installed' },
  { id: EVENTS.APP_RESTORE, label: 'Restored' },
  { id: EVENTS.APP_UNINSTALL, label: 'Uninstalled' },
  { id: EVENTS.APP_UPDATE, label: 'Update started' },
  { id: EVENTS.APP_UPDATE_FINISH, label: 'Update finished' },
  { id: EVENTS.APP_LOGIN, label: 'Log in' },
  { id: EVENTS.APP_OOM, label: 'Out of memory' },
  { id: EVENTS.APP_DOWN, label: 'Down' },
  { id: EVENTS.APP_UP, label: 'Up' },
  { id: EVENTS.APP_START, label: 'Started' },
  { id: EVENTS.APP_STOP, label: 'Stopped' },
  { id: EVENTS.APP_RESTART, label: 'Restarted' },
  { separator: true, label: 'Platform backup' },
  { id: EVENTS.BACKUP_CLEANUP_START, label: 'Cleanup started' },
  { id: EVENTS.BACKUP_CLEANUP_FINISH, label: 'Cleanup finished' },
  { id: EVENTS.BACKUP_START, label: 'Started' },
  { id: EVENTS.BACKUP_FINISH, label: 'Finished' },
  { id: EVENTS.BACKUP_INTEGRITY_START, label: 'Integrity check started' },
  { id: EVENTS.BACKUP_INTEGRITY_FINISH, label: 'Integrity check finished' },
  { id: EVENTS.BACKUP_SITE_ADD, label: 'Site added' },
  { id: EVENTS.BACKUP_SITE_REMOVE, label: 'Site removed' },
  { separator: true, label: 'Certificates' },
  { id: EVENTS.CERTIFICATE_NEW, label: 'Obtained' },
  { id: EVENTS.CERTIFICATE_RENEWAL, label: 'Renewed' },
  { id: EVENTS.CERTIFICATE_CLEANUP, label: 'Cleaned up' },
  { separator: true, label: 'Domains' },
  { id: EVENTS.DOMAIN_ADD, label: 'Added' },
  { id: EVENTS.DOMAIN_UPDATE, label: 'Updated' },
  { id: EVENTS.DOMAIN_REMOVE, label: 'Removed' },
  { separator: true, label: 'Email' },
  { id: EVENTS.MAIL_LOCATION, label: 'Location changed' },
  { id: EVENTS.MAIL_ENABLED, label: 'Enabled/Disabled' },
  { id: EVENTS.MAIL_MAILBOX_ADD, label: 'Mailbox added' },
  { id: EVENTS.MAIL_MAILBOX_UPDATE, label: 'Mailbox updated' },
  { id: EVENTS.MAIL_MAILBOX_REMOVE, label: 'Mailbox removed' },
  { id: EVENTS.MAIL_LIST_ADD, label: 'Mailinglist added' },
  { id: EVENTS.MAIL_LIST_UPDATE, label: 'Mailinglist updated' },
  { id: EVENTS.MAIL_LIST_REMOVE, label: 'Mailinglist removed' },
  { separator: true, label: 'Services' },
  { id: EVENTS.SERVICE_CONFIGURE, label: 'Configured' },
  { id: EVENTS.SERVICE_REBUILD, label: 'Rebuilt' },
  { id: EVENTS.SERVICE_RESTART, label: 'Restarted' },
  { separator: true, label: 'Users' },
  { id: EVENTS.USER_ADD, label: 'Added' },
  { id: EVENTS.USER_UPDATE, label: 'Updated' },
  { id: EVENTS.USER_REMOVE, label: 'Removed' },
  { id: EVENTS.USER_LOGIN, label: 'Logged in' },
  { id: EVENTS.USER_LOGIN_GHOST, label: 'Ghost logged in' },
  { id: EVENTS.USER_LOGOUT, label: 'Logged out' },
  { separator: true, label: 'Groups' },
  { id: EVENTS.GROUP_ADD, label: 'Added' },
  { id: EVENTS.GROUP_UPDATE, label: 'Updated' },
  { id: EVENTS.GROUP_REMOVE, label: 'Removed' },
  { separator: true, label: 'Volumes' },
  { id: EVENTS.VOLUME_ADD, label: 'Added' },
  { id: EVENTS.VOLUME_UPDATE, label: 'Updated' },
  { id: EVENTS.VOLUME_REMOVE, label: 'Removed' },
  { separator: true, label: 'Branding' },
  { id: EVENTS.BRANDING_AVATAR, label: 'Avatar changed' },
  { id: EVENTS.BRANDING_FOOTER, label: 'Footer changed' },
  { id: EVENTS.BRANDING_NAME, label: 'Name started' },
  { separator: true, label: 'Cloudron' },
  { id: EVENTS.ACTIVATE, label: 'Activated' },
  { id: EVENTS.PROVISION, label: 'Provisioned' },
  { id: EVENTS.RESTORE, label: 'Restored' },
  { id: EVENTS.START, label: 'Started' },
  { id: EVENTS.UPDATE, label: 'Update started' },
  { id: EVENTS.UPDATE_FINISH, label: 'Update finished' },
  { id: EVENTS.DASHBOARD_DOMAIN_UPDATE, label: 'Dashboard domain updated' },
  { id: EVENTS.DYNDNS_UPDATE, label: 'DynDNS changed' },
  { id: EVENTS.DIRECTORY_SERVER_CONFIGURE, label: 'LDAP configured ' },
  { id: EVENTS.EXTERNAL_LDAP_CONFIGURE, label: 'External LDAP configured' },
  { id: EVENTS.USER_DIRECTORY_PROFILE_CONFIG_UPDATE, label: 'Profile config changed' },
];

async function fetchPage(filter, page, perPage) {
  return eventlogsModel.search(filter, page, perPage);
}

async function onHashChange() {
  const params = new URLSearchParams(window.location.hash.slice(window.location.hash.indexOf('?')));
  const search = params.get('search') || '';
  if (search && eventlogList.value) eventlogList.value.setHighlight(search);
}

onMounted(() => {
  window.addEventListener('hashchange', onHashChange);
  onHashChange();
});

onUnmounted(() => {
  window.removeEventListener('hashchange', onHashChange);
});

</script>

<template>
  <div class="content-large" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
    <div class="section" style="overflow: hidden; display: flex; flex-direction: column;">
      <h1 class="section-header">{{ $t('eventlog.title') }}</h1>
      <EventlogList ref="eventlogList" :fetch-page="fetchPage" :available-actions="availableActions" />
    </div>
  </div>
</template>
