ihm_client/src/components/header/header.ts

import ModalService from '~/services/modal.service';
import { INotification } from '../../models/notification.model';
import { currentRoute, navigate } from '../../router';
import Services from '../../services/service';
import { BackUp } from '~/models/backup.model';

let notifications = [];

export async function unpair() {
  const service = await Services.getInstance();
  await service.unpairDevice();
  await navigate('home');
}

(window as any).unpair = unpair;

function toggleMenu() {
  const menu = document.getElementById('menu');
  if (menu) {
    if (menu.style.display === 'block') {
      menu.style.display = 'none';
    } else {
      menu.style.display = 'block';
    }
  }
}
(window as any).toggleMenu = toggleMenu;

async function getNotifications() {
  const service = await Services.getInstance();
  notifications = service.getNotifications() || [];
  return notifications;
}
function openCloseNotifications() {
  const notifications = document.querySelector('.notification-board') as HTMLDivElement;
  notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none';
}

(window as any).openCloseNotifications = openCloseNotifications;

export async function initHeader() {
  if (currentRoute === 'account') {
    // Charger le profile-header
    const profileContainer = document.getElementById('profile-header-container');
    if (profileContainer) {
      const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
      profileContainer.innerHTML = profileHeaderHtml;

      // Initialiser les données du profil
      loadUserProfile();
    }
  }
  if (currentRoute === 'home') {
    hideSomeFunctionnalities();
  } else {
    fetchNotifications();
    setInterval(fetchNotifications, 2 * 60 * 1000);
  }
}

function hideSomeFunctionnalities() {
  const bell = document.querySelector('.bell-icon') as HTMLDivElement;
  if (bell) bell.style.display = 'none';
  const notifBadge = document.querySelector('.notification-badge') as HTMLDivElement;
  if (notifBadge) notifBadge.style.display = 'none';
  const actions = document.querySelectorAll('.menu-content a') as NodeListOf<HTMLAnchorElement>;
  const excludedActions = ['Import', 'Export'];
  for (const action of actions) {
    if (!excludedActions.includes(action.innerHTML)) {
      action.style.display = 'none';
    }
  }
}

async function setNotification(notifications: any[]): Promise<void> {
  const badge = document.querySelector('.notification-badge') as HTMLDivElement;
  const noNotifications = document.querySelector('.no-notification') as HTMLDivElement;
  if (notifications?.length) {
    badge.innerText = notifications.length.toString();
    const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement;
    notificationBoard.querySelectorAll('.notification-element')?.forEach((elem) => elem.remove());
    noNotifications.style.display = 'none';
    for (const notif of notifications) {
      const notifElement = document.createElement('div');
      notifElement.className = 'notification-element';
      notifElement.setAttribute('notif-id', notif.processId);
      notifElement.innerHTML = `
          <div>Validation required : </div>
          <div style="text-overflow: ellipsis; content-visibility: auto;">${notif.processId}</div>
          `;
      // this.addSubscription(notifElement, 'click', 'goToProcessPage')
      notificationBoard.appendChild(notifElement);
      notifElement.addEventListener('click', async () => {
        const modalService = await ModalService.getInstance();
        modalService.injectValidationModal(notif);
      });
    }
  } else {
    noNotifications.style.display = 'block';
  }
}

async function fetchNotifications() {
  const service = await Services.getInstance();
  const data = service.getNotifications() || [];
  await setNotification(data);
}

async function loadUserProfile() {
  // Charger les données du profil depuis le localStorage
  const userName = localStorage.getItem('userName');
  const userLastName = localStorage.getItem('userLastName');
  const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
  const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';

  // Mettre à jour les éléments du DOM
  const nameElement = document.querySelector('.user-name');
  const lastNameElement = document.querySelector('.user-lastname');
  const avatarElement = document.querySelector('.avatar');
  const bannerElement = document.querySelector('.banner-image');

  if (nameElement) nameElement.textContent = userName;
  if (lastNameElement) lastNameElement.textContent = userLastName;
  if (avatarElement) (avatarElement as HTMLImageElement).src = userAvatar;
  if (bannerElement) (bannerElement as HTMLImageElement).src = userBanner;
}

async function importJSON() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.json';

  input.onchange = async (e) => {
    const file = (e.target as HTMLInputElement).files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = async (e) => {
        try {
          const content: BackUp = JSON.parse(e.target?.result as string);
          const service = await Services.getInstance();
          await service.importJSON(content);
          alert('Import réussi');
          window.location.reload();
        } catch (error) {
          alert("Erreur lors de l'import: " + error);
        }
      };
      reader.readAsText(file);
    }
  };

  input.click();
}

(window as any).importJSON = importJSON;

async function createBackUp() {
  const service = await Services.getInstance();
  const backUp = await service.createBackUp();
  if (!backUp) {
    console.error("No device to backup");
    return;
  }

  try {
    const backUpJson = JSON.stringify(backUp, null, 2)
    const blob = new Blob([backUpJson], { type: 'application/json' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = '4nk-backup.json'; 
    a.click();

    URL.revokeObjectURL(url);

    console.log('Backup successfully prepared for download');
  } catch (e) {
    console.error(e);
  }
}

(window as any).createBackUp = createBackUp;

async function disconnect() {
  console.log('Disconnecting...');
  try {
    localStorage.clear();

    await new Promise<void>((resolve, reject) => {
      const request = indexedDB.deleteDatabase('4nk');
      request.onsuccess = () => {
        console.log('IndexedDB deleted successfully');
        resolve();
      };
      request.onerror = () => reject(request.error);
      request.onblocked = () => {
        console.log('Database deletion was blocked');
        resolve();
      };
    });

    const registrations = await navigator.serviceWorker.getRegistrations();
    await Promise.all(registrations.map(registration => registration.unregister()));
    console.log('Service worker unregistered');

    await navigate('home');

    setTimeout(() => {
      window.location.href = window.location.origin;
    }, 100);

  } catch (error) {
    console.error('Error during disconnect:', error);
    // force reload
    window.location.href = window.location.origin;
  }
}

(window as any).disconnect = disconnect;