import { INotification } from '../../models/notification.model';
import { currentRoute, navigate } from '../../router';
import Services from '../../services/service';

let notifications = [];

export async function unpair() {
  const service = await Services.getInstance();
  await service.unpairDevice();
  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>;
  for (const action of actions) {
    if (action.innerHTML !== 'Import') {
      action.style.display = 'none';
    }
  }
}

async function setNotification(notifications: INotification[]): 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;
    noNotifications.style.display = 'none';
    for (const notif of notifications) {
      const notifElement = document.createElement('div');
      notifElement.className = 'notification-element';
      notifElement.setAttribute('notif-id', notif.id.toString());
      notifElement.innerHTML = `
          <div>${notif.title}</div>
          <div>${notif.description}</div>
          `;
      // this.addSubscription(notifElement, 'click', 'goToProcessPage')
      notificationBoard.appendChild(notifElement);
    }
  } else {
    noNotifications.style.display = 'block';
  }
}

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

async function loadUserProfile() {
  // Charger les données du profil depuis le localStorage
  const userName = localStorage.getItem('userName') || 'John';
  const userLastName = localStorage.getItem('userLastName') || 'Doe';
  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-last-name');
  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 = JSON.parse(e.target?.result as string);
        const service = await Services.getInstance();
        await service.importJSON(content);
        alert('Import réussi');
      } catch (error) {
        alert('Erreur lors de l\'import: ' + error);
      }
    };
    reader.readAsText(file);
  }
};

input.click();
}

(window as any).importJSON = importJSON;